1.正方形
<div class="square"></div>.square {
width: 100px;
height: 100px;
background-color: #ffff00;
}效果：
2.长方形
<div class="rectangle"></div> .rectangle{
width: 200px;
height: 100px;
background-color: #ff0000;
}
3.菱形
<div class="rhombus"></div> .rhombus{
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: #ffff00;
}
4.三角形
<div class="triang"></div> .triang{
width: 0px;
height: 0px;
border: 40px solid transparent;
border-bottom: 40px solid #ff0000;
} 
文章来源：https://www.toymoban.com/news/detail-705457.html
5.梯形
<div class="trapezoid"></div> .trapezoid {
width: 100px;
height: 0px;
border: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
文章来源地址https://www.toymoban.com/news/detail-705457.html
到了这里，关于纯css制作常见的图形的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
