1、transform: rotate + overflow: hidden
就是利用BFC的特性，在封闭的盒子里面，以图形的左下角（left bottom）作为旋转中心，进行旋转，把超出部分隐藏、
.father {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: pink;
transform-origin: left bottom;
transform: rotate(45deg);
}
}
2、clip-path 剪切
clip-path 可以将一个容器裁剪成任何我们想要的样子
div {
background: deeppink;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
3、border + transparent
设置一个宽高为0的盒子，用边框大小来控制三角形大小
transparent设置当前层级透明，显示底色
div {
width:0px;
height:0px;
border-width: 50px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg);
}
如何设置了宽高就变成方形的环
通过旋转来显示不同的三角形
4、linear-gradient 线性渐变
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, yellowgreen);
}
不用渐变
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}
再设置透明
div {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}
文章来源：https://www.toymoban.com/news/detail-822587.html
本文是从其他的学习到：文章来源地址https://www.toymoban.com/news/detail-822587.html
到了这里，关于CSS 画三角形的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
