边框画的三角形给shadow
本文地址：http://www.cnblogs.com/veinyin/p/8690882.html
要写一个对话气泡样式，我们首先想到的当然给是一个盒子，然后用边框画一个三角形定位过去。
如果不需要给阴影，这样是肯定没问题的。
但是！当 UI 把三角形放在顶部，并要求给加一个阴影的时候，内心就是极度崩溃的了。
基本上三角形都是一个边框，而这样画出来的三角形是给不了阴影的，所以要曲线救国。
首先我想到的就是画三个三角形，分别给白色、浅灰、深灰，定位过去给假阴影，这样效果看上去很生硬，如下：
这时就需要想点别的方法了。
第二种方式就是用两条边画三角形，两条相邻的给颜色，另两条相邻的给 transparent，这样就可以给 box-shadow 了。
但是！当然有但是。三角形有投影了，定位过去三角形跟下面盒子一定会有一个分割线。
要解决这个问题，只需要给一个遮罩盖一下。
这时，我们会开心的发现分割线没了。
但是！另一个问题出现了。是的，太多问题要解决。
我们在盒子里给内容时，发现上面遮罩挡住了内容，因为要挡住必须把 z-index 给的比盒子大。
知道问题之后就很好解决了。再给一个放内容的盒子，z-index 给一个比遮罩更大的值就可以了。
效果如下图，可以说是很完美的达到 UI 效果了。
至此结束，HTML 与 CSS 如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
padding: 0;
margin: 0;
background-color: #ccc;
}
.box {
width: 500px;
/* height: 300px; */
background-color:#ffffff;
margin: 100px auto;
position: relative;
border-radius: 8px;
box-shadow: 4px 4px 8px #333
} .triangle{
z-index: -9;
position: absolute;
top: -10px;
left: 280px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: #fff #fff transparent transparent;
transform: rotate(-45deg);
box-shadow: 4px 4px 8px #333;
}
.triangle-mask{
z-index: 2;
width: 30px;
height: 30px;
background-color: #ffffff;
transform: rotate(-45deg);
position: absolute;
top: -12px;
left: 285px;
}
.container{
position: relative;
top: 0;
left: 0;
z-index: 3;
background-color:#ffffff;
border-radius: 8px;
padding: 10px;
}
</style>
</head> <body>
<div class="box">
<div class="container">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<div class="triangle"></div>
<div class="triangle-mask"></div>
</div>
</body> </html>
END~~~≥ω≤
边框画的三角形给shadow的更多相关文章
- OpenGL阴影，Shadow Volumes（附源程序，使用 VCGlib ）
实验平台:Win7,VS2010 先上结果截图: 本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...
- Project Settings之Quality翻译
(版本是2018.4......翻译是自己的渣翻译水平) Unity allows you to set the level of graphical quality it attempts to r ...
- 简单说 通过CSS的滤镜 实现 火焰效果
说明 上次我们了解了一些css滤镜的基础知识, 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果. 解释 要实现上面的火焰效果,我们先来了解一些必要的东西. 上次我 ...
- css进阶 01-CSS中的非布局样式
01-CSS中的非布局样式 #前言 CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括: 字体.字重.颜色.大小.行高 背景.边框 滚动.换行 装饰性属性(粗体.斜体.下划线)等. 这篇文 ...
- 用CSS绘制箭头等三角形图案 [译]
最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...
- (转)Shadow Map & Shadow Volume
转自:http://blog.csdn.net/hippig/article/details/7858574 shadow volume 这个术语几乎是随着 DOOM3 的发布而成为FPS 玩家和图形 ...
- CSS三角形广告文字
街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...
- 利用Border画三角形
边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...
- opengl 教程(24) shadow mapping (2)
原帖地址:http://ogldev.atspace.co.uk/www/tutorial24/tutorial24.html 本篇教程中,我们通过shadowmap来实现阴影渲染. 我们知道shad ...
随机推荐
- python基础（四）文件操作和集合
一.文件操作 对文件的操作分三步: 1.打开文件获取文件的句柄,句柄就理解为这个文件 2.通过文件句柄操作文件 3.关闭文件. 1.文件基本操作: f = open('file.txt','r') # ...
- Python实现熵值法确定权重
本文从以下四个方面,介绍用Python实现熵值法确定权重: 一. 熵值法介绍 二. 熵值法实现 三. Python实现熵值法示例1 四. Python实现熵值法示例2 一. 熵值法介绍 熵值法是计算指 ...
- [51CTO]反客为主 ，Linux 成为微软 Azure 上最流行的操作系统
反客为主 ,Linux 成为微软 Azure 上最流行的操作系统 [世界上唯一确定不变的就是世界在不停的变化] 三年前,微软云计算 Azure 平台 CTO Mark Russinovich 说有四分 ...
- AtCoder Grand Contest 029 翻车记
A:对于每个B,会和其右边的每个W交换一次. #include<iostream> #include<cstdio> #include<cmath> #includ ...
- CF915E Physical Education Lessons
题意: Alex高中毕业了,他现在是大学新生.虽然他学习编程,但他还是要上体育课,这对他来说完全是一个意外.快要期末了,但是不幸的Alex的体育学分还是零蛋! Alex可不希望被开除,他想知道到期末还 ...
- 触发Full GC执行的情况 以及其它补充信息
除直接调用System.gc外,触发Full GC执行的情况有如下四种.1. 旧生代空间不足旧生代空间只有在新生代对象转入及创建为大对象.大数组时才会出现不足的现象,当执行Full GC后空间仍然不足 ...
- C++ STL 常用算术和生成算法
C++ STL 常用算术和生成算法 accumulate() accumulate: 对指定范围内的元素求和,然后结果再加上一个由val指定的初始值. #include<numeric> ...
- 【刷题】BZOJ 4530 [Bjoi2014]大融合
Description 小强要在N个孤立的星球上建立起一套通信系统.这套通信系统就是连接N个点的一个树. 这个树的边是一条一条添加上去的.在某个时刻,一条边的负载就是它所在的当前能够 联通的树上路过它 ...
- 【bzoj1194】 HNOI2006—潘多拉的盒子
http://www.lydsy.com/JudgeOnline/problem.php?id=1194 (题目链接) 题意 给出S个自动机,如果一个自动机u的所有状态是另一个自动机v的状态的子集,那 ...
- 人人贷网的数据爬取（利用python包selenium）
记得之前应同学之情,帮忙爬取人人贷网的借贷人信息,综合网上各种相关资料,改善一下别人代码,并能实现数据代码爬取,具体请看我之前的博客:http://www.cnblogs.com/Yiutto/p/5 ...