用纯CSS创建一个三角形

时间:2023-03-09 09:19:29
用纯CSS创建一个三角形

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

#demo1 {
width:;
height:;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;//方向往那边就把颜色设在他相反的位置;推荐使用这个,好记;
}
或者

#demo2 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid red;  //二边的宽度设为底边的一半
}