css划图形 |css 让页面全部变灰

/* 案例1：划一个三角形 */
.triangle {
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #000 transparent;
width: 0;
height: 0;
}
/* 案例2：划一个圆形 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #000;
}
/* 案例3：划一个梯形 */
.trapezoid {
border-bottom: 100px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
}
/* 案例4：划一个菱形 */
.rhombus {
transform: rotate(45deg);
width: 100px;
height: 100px;
background-color: #000;
}
/* 案例5：划一个正方形 */
.square {
width: 100px;
height: 100px;
background-color: #000;
}
/* 案例6：划一个长方形 */
.rectangle {
width: 200px;
height: 100px;
background-color: #000;
}

以上是6个CSS划图形的案例，相信你已经掌握了如何使用CSS来划制各种形状。使用CSS划图形能够为大家的页面增加更多的趣味性，同时也可以突出页面中的重点内容，让用户更加易于理解。