1、transform: rotate + overflow: hidden
就是利用BFC的特性,在封闭的盒子里面,以图形的左下角(left bottom)作为旋转中心,进行旋转,把超出部分隐藏、
css
.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 可以将一个容器裁剪成任何我们想要的样子
css
div {
background: deeppink;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
3、border + transparent
设置一个宽高为0的盒子,用边框大小来控制三角形大小
transparent设置当前层级透明,显示底色
css
div {
width:0px;
height:0px;
border-width: 50px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg);
}
如何设置了宽高就变成方形的环
通过旋转来显示不同的三角形
4、linear-gradient 线性渐变
css
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, yellowgreen);
}
不用渐变
css
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}
再设置透明
css
div {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}