1. 设置不同颜色的 border
<div class="block"></div>
.block {
display: inline-block;
height: 0;
0;
border-top: 50px solid yellowgreen;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
2. linear-gradient() 线性渐变
- linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
- 通过旋转 rotate 或者 scale,就能得到各种角度
.block {
display: inline-block;
height: 100px;
100px;
/* 从左下到右上,从蓝色开始渐变、到50%位置是透明色渐变开始、最后以透明色结束 */
background: linear-gradient(45deg, blue, blue 50%, transparent 50%, transparent 100%);
/* 或者: background: linear-gradient(to right top, blue, blue 50%, transparent 50%, transparent 100%); */
}
3. conic-gradient() 锥形渐变
.block {
display: inline-block;
height: 100px;
100px;
/* 绘制圆心在(0, 0),绘制起点在90度,从蓝色开始绘制到45度的位置,从45.1度开始绘制透明色 */
background: conic-gradient(from 90deg at 0 0, blue 0, blue 45deg, transparent 45.1deg);
}
4. 旋转 transform: rotate
.block {
display: inline-block;
height: 100px;
141px;
position: relative;
overflow: hidden;
}
.block::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: blue;
/* 旋转原点在(0, 0),旋转90度 */
transform-origin: 0 0;
transform: rotate(45deg);
}
5. clip-path 使用裁剪创建元素的可显示区域
.block {
display: inline-block;
height: 100px;
100px;
background: blue;
/* polygon 定义多边形, ()里面的每对参数表示多边形的顶点坐标(X,Y),也就是连接点 */
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
6. 使用特殊字符绘制三角形
◄ : ◄
► : ►
▼ : ▼
▲ : ▲
⊿ : ⊿
△ : △
<div class="block">▲</div>
.block {
font-size: 100px;
color: blue;
}
注意:该方法呈现的三角形效果与当前浏览器所安装的字体相关,所以,慎用。