CSS绘制三角形

其实画三角形只要打开思路就会很简单
这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容
目录

1. 边框常识这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容
2. 边框操作这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容
3. 制作三角形这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容
4. 制作箭头这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容

第一部分

这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容

1.平常我们设计网页一般都会写个div然后设置尺寸及边框，这样我们设计出来的结果就是这样的

div{
    width: 200px;
    height: 200px;
    border: 20px pink solid;
}

第二部分

这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容这是隐藏内容
2.但是当我们把div的尺寸改为零，分别设置边框的四个方向，就会变成这样

div{
    width: 0px;
    height: 0px;
    border-top: 20px pink solid;
    border-bottom: 20px pink solid;
    border-left: 20px blue solid;
    border-right: 20px blue solid;
} 

第三部分

3.这时我们就能发现一个问题，div被分成了四个三角形。那我们改变思路，如果只设置其中一个方向的边框为自己想要的颜色，其他方向设置为透明，那么我们就可以得到想要的三角形

这里只保留了左边框的颜色，因为我浏览器的body没有设置背景颜色，所以其他边框透明之后是白色

div{
    width: 0px;
    height: 0px;
    border-top: 20px transparent solid;
    border-bottom: 20px transparent solid;
    border-left: 20px blue solid;
    border-right: 20px transparent solid;
} 

这样我们想要的三角形就出来啦

第四部分

同理如果想要一个箭头的形状，就再写一个出来，利用绝对定位设置所在位置，然后用z-index设置谁在上谁在下就可以了

.div1{
    position: relative;
    width: 0px;
    height: 0px;
    border-top: 20px transparent solid;
    border-bottom: 20px transparent solid;
    border-left: 20px blue solid;
    border-right: 20px transparent solid;
} 
.div2{
    position: absolute;
    top: 4px;
    left: 743px;
    z-index:2;
    width: 0px;
    height: 0px;
    border-top: 16px transparent solid;
    border-bottom: 16px transparent solid;
    border-left: 16px white solid;
    border-right: 16px transparent solid;
}

​