6. css绘制三角形五种方法？

参考答案：

方法一：设置不同颜色的border

<div class="block1"></div>

.block1 {
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 50px solid yellowgreen;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

方法二：linear-gradient() 线性渐变

<div class="block2"></div>

.block2 {
    display: inline-block;
    height: 100px;
    width: 100px;
    /* 从左下到右上，从蓝色开始渐变、到50%位置是透明色渐变开始、最后以透明色结束 */
    background: linear-gradient(45deg, yellowgreen, yellowgreen 50%, transparent 50%, transparent 100%);
    /* 或者： background: linear-gradient(to right top, yellowgreen, yellowgreen 50%, transparent 50%, transparent 100%); */
}

方法三：clip-path 使用裁剪创建元素的可显示区域

<div class="block3"></div>

.block3 {
    display: inline-block;
    height: 100px;
    width: 100px;
    background: yellowgreen;
    /* polygon 定义多边形， ()里面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点 */
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

方法四：conic-gradient() 锥形渐变

<div class="block4"></div>

.block4 {
    display: inline-block;
    height: 100px;
    width: 100px;
    /* 绘制圆心在（0, 0），绘制起点在90度，从蓝色开始绘制到45度的位置，从45.1度开始绘制透明色 */
    background: conic-gradient(from 90deg at 0 0, yellowgreen 0, yellowgreen 45deg, transparent 45.1deg);
}

方法五：旋转 transform: rotate

<div class="block5"></div>

.block5 {
    display: inline-block;
    height: 100px;
    width: 141px;
    position: relative;
    overflow: hidden;
}
.block5::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: yellowgreen; 
    /* 旋转原点在(0, 0），旋转90度 */
    transform-origin: 0 0;
    transform: rotate(45deg);
}