怎么用CSS画一个带阴影的三角形呢?
有童鞋说,这还不简单吗
网上有很多解决方案,但其实大多都是实现不太完美的,存在一些问题
假设我们做一个向下的三角形箭头
常见的方法大致有两种
1.通过边框控制,border-left和边境设为透明,border-top设为预定的颜色即可
2.通过变换旋转盒子
-
<李>
设计
李
2.1边框法
html结构
<前> & lt; body> ,,,& lt; div 类=癰ox"祝辞& lt;/div> & lt;/body> 之前css样式
<前> .box { ,,,位置:,相对; ,,,宽度:,200 px; ,,,身高:,100 px; ,,,背景:,# ff8605; ,,,不必:,2 px 2 px 2 px rgba (0, 0, 0,,。2); } .box: after { ,,,内容:,& # 39;& # 39;; ,,,位置:,绝对; ,,,底部:,9 px; ,,,左:,45 px; ,,,border-left:, 10 px solid 透明; ,,,边境:,10 px solid 透明; ,,,border-top:, 10 px solid # ff8605; } 之前缺点很明显,我们不能通过不必的方式来设置阴影,阴影会是一个盒子
但如果不用设阴影,只是需要边框的话,我们可以再定义一个伪类元素,覆盖到三角形的下面即可
<前> .box: before { ,,,位置:,绝对; ,,,底部:,-10 px; ,,,左:,45 px; ,,,内容:,& # 39;& # 39;; ,,,border-left:, 10 px solid 透明; ,,,边境:,10 px solid 透明; ,,,border-top:, 10 px solid rgba (0, 0, 0, 1。); } 之前如图所示
如果要求不严格似乎也够用了。但作为一个严格的前端工程师!我们还是不能容忍这种实现方法
正确的姿势是使用滤镜(过滤器)中的下拉阴影()
下拉阴影才是真正意义上的投影,而不必只是盒阴影
它只会投影出真实图形的阴影
<前> .box: after { ,,,位置:,绝对; ,,,底部:,9 px; ,,,左:,45 px; ,,,内容:,& # 39;& # 39;; ,,,border-left:, 10 px solid 透明; ,,,边境:,10 px solid 透明; ,,,border-top:, 10 px solid # ff8605; ,,,过滤器:,下拉阴影(2 px 2 px 2 px rgba (0, 0, 0,,。2)); } 之前
2.2变换方法
这种方法的思路就是使用变换旋转盒子,一半被上面的容器遮挡,一半显示出来
<前> .box: before { ,,,位置:,绝对; ,,,底部:,5 px; ,,,左:,45 px; ,,,内容:,& # 39;& # 39;; ,,,宽度:,10 px; ,,,身高:,10 px; ,,,背景:,# ff8605; :,,,变换,旋转(135度); ,,,不必:,1 px 2 px 2 px rgba (0, 0, 0,,。2); } 之前
我们似乎实现了我们想要的结果,但是,其实是存在一个问题的,但因为我们的阴影面积不够大,所以图片上看起来不明显
当我们把不必的阴影面积扩大时,我们发现到问题的所在了
盒子突出来了,那怎么解决呢
我们再定义一个与容器颜色相同的盒子,将上半部分盖住就可以啦。
<前>/*,变换的方法,*/.box: before { ,,,位置:,绝对; ,,,底部:,5 px; ,,,左:,45 px; ,,,内容:,& # 39;& # 39;; ,,,宽度:,10 px; ,,,身高:,10 px; ,,,背景:,# ff8605; :,,,变换,旋转(135度); ,,,不必:,1 px 2 px 5 px rgba (0, 0, 0,,。2); } .box: after { ,,,位置:,绝对; ,,,底部:,0 px; ,,,左:,40像素; ,,,内容:,& # 39;& # 39;; ,,,宽度:,20 px; ,,,身高:,20 px; ,,,背景:,# ff8605; }
