详情小三角css,3. 小三角及原理

要点

## 用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉(颜色设为 transparent)

```

#demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

```

> 1.内容为空，边框颜色为transparent透明，再给其中一个边颜色，就可显示小三角

> 2.用伪类，不占用盒子本身的空间，也不影响其他元素

> border: 20px solid transparent;

> border-left-color: #2dae2d;

~~~

.box{

width: 500px;

height: 100px;

background: #2dae2d;

margin: 200px;

position: relative;

}

.box::after{

content: "";

border: 20px solid transparent;

border-left-color: #2dae2d;

position: absolute;

top: 0px;

right:-40px;

}//用伪类元素做出小三角

.sanjiao{

width: 0px;

height: 0px;

background: #fff;

margin: 200px;

border-width: 100px;

border-style: solid ;

border-color: #2dae2d pink blue blueviolet;

}//小三角的原理

* * * * *