css实现三角形
一、html代码定义一个元素
<div class="arrow"></div>
二、利用div+before+after实现如下图效果:
利用after和before各实现一个三角形,after的index大于before。通过移位,覆盖即可实现此效果。
.arrow{
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #333;
}
.arrow:before{
content: "";
border-bottom: 10px solid black;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
bottom:100%;
left: 10px;
}
.arrow:after{
content: "";
border-bottom: 8px solid white;
border-left:8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
bottom:100%;
left: 12px;
}
三、利用样式去控制显示三角形
1、下三角
.arrow{
width: 0;
height: 0;
border-width: 40px;
border-style:solid;
border-color: orange transparent transparent transparent;
}
或者利用after/before伪类实现
.arrow:before{
content: "";
border-top: 40px solid orange;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
显示为:
2、上三角
.arrow{
width: 0;
height: 0;
border-width: 40px;
border-style:solid;
border-color: transparent transparent orange transparent;
}
或者利用after/before伪类实现
.arrow:before{
content: "";
border-bottom: 40px solid orange;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
显示为:
3、右三角
.arrow{
width: 0;
height: 0;
border-width: 40px;
border-style:solid;
border-color: transparent transparent transparent orange;
}
显示为:
4、左三角
.arrow{
width: 0;
height: 0;
border-width: 40px;
border-style:solid;
border-color: transparent orange transparent transparent ;
}
显示为: