css实现三角形

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 ;
}

显示为：