摘要：思路怎么用画一个带阴影的三角形呢有童鞋说这还不简单吗网上有很多解决方案但其实大多都是实现不太完美的存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种通过边框控制和设为透明设为预定的颜色即可通过旋转盒子方法一可以画三角形但是
1. 思路
怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题
假设我们做一个向下的三角形箭头 常见的方法大致有两种
方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言)
2. 设计
2.1 边框法
html结构
?| 1 2 3 |
<body>
<div class="box"> |
css样式
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.box {
position: relative;
width: 200px;
height: 100px;
background: #ff8605;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.box::after {
content: ";
position: absolute;
bottom: -9px;
left: 45px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ff8605;
}
|
缺点很明显, 我们不能通过box-shadow的方式来设置阴影, 阴影会是一个盒子
但如果不用设阴影, 只是需要边框的话, 我们可以再定义一个伪类元素, 覆盖到三角形的下面即可
?| 1 2 3 4 5 6 7 8 9 |
.box::before {
position: absolute;
bottom: -10px;
left: 45px;
content: ";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0, 0, 0, .1);
}
|
如图所示
如果要求不严格似乎也够用了. 但作为一个严峻的前端工程师! 我们还是不能容忍这种实现方法, 下面我们看一看 tranform 方法是如何解决的
2.2 transform方法
这种方法的思路就是使用transform旋转盒子, 一半被上面的容器遮挡, 一半显示出来
?| 1 2 3 4 5 6 7 8 9 10 11 |
.box::before {
position: absolute;
bottom: -5px;
left: 45px;
content: ";
width: 10px;
height: 10px;
background: #ff8605;
transform: rotate(135deg);
box-shadow: 1px -2px 2px rgba(0, 0, 0, .2);
}
|
我们似乎实现了我们想要的结果, 但是, 其实是存在一个问题的, 但因为我们的阴影面积不够大, 所以图片上看起来不明显
当我们把 box-shadow 的阴影面积扩大时, 我们发现到问题的所在了
盒子突出来了, 那怎么解决呢
我们再定义一个与容器颜色相同的盒子, 将上半部分盖住就可以啦.
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* transform方法 */
.box::before {
position: absolute;
bottom: -5px;
left: 45px;
content: ";
width: 10px;
height: 10px;
background: #ff8605;
transform: rotate(135deg);
box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
}
.box::after {
position: absolute;
bottom: 0px;
left: 40px;
content: ";
width: 20px;
height: 20px;
background: #ff8605;
}
|
要注意三角形应该用 before 定义, 覆盖的盒子应该用 after 定义, 这样盒子才能覆盖到三角形上面
实现效果:
3. 最终解决方案代码
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>CSS实现带阴影效果的三角形 |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1069.html
摘要：圆弧二次贝塞尔曲线及三次贝塞尔曲线绘制二次贝塞尔曲线，为一个控制点，为结束点。二次贝塞尔曲线三次贝塞尔曲线色彩设置图形的填充颜色。线段末端以圆形结束。例如，表示颜色会出现在正中间。操控动画当设定好间隔时间后，会定期执行。 矩形 fillRect(x, y, width, height) 填充矩形 strokeRect(x, y, width, height) 绘制矩形边框 clear...
摘要：简介部分记录是一门预处理语言，它扩充了语言，增加了诸如变量混合函数等功能，让更易维护方便制作主题扩充，是一种动态样式语言。运算可进行加减乘除的运算。 Less简介部分记录： 1、 Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充，是一种动态样式语言。2、 编译工具：Koala。3、 注释（两种...
阅读 2257·2023-04-26 02:14
阅读 2929·2021-09-30 09:46
阅读 2104·2021-09-24 09:48
阅读 956·2021-09-24 09:47
阅读 3253·2019-08-30 15:44
阅读 1881·2019-08-30 15:44
阅读 3282·2019-08-30 14:18
阅读 1951·2019-08-30 12:58
