用CSS实现三角形

Posted 2020-08-02

如图：

导航下的白色三角形的构成

代码如下：

html：

<div class="container"><div class="triangle"></div></div>

CSS如下：

.container{
background-color:#528CB1;
width:20px;
height:20px;
}
.triangle{
width:0;
height:0;
border-width: 5px;
border-style:solid;
border-color:#528CB1 #528CB1 #ffffff #528CB1;
overflow: hidden;
display: inline-block;
}

得出的结果：

注：用CSS实现的三角形，必须保持三角形的其他三边与父元素背景颜色一样。

把border-color的颜色改为#528CB1 #ffffff #528CB1 #528CB1，可以得到三角形，可以改变其他方向的颜色得到不同方向的三角形哦。