CSS怎么实现各种形状

圆形

可以使用border-radius属性将一个方形div圆化：

<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
}

三角形

可以使用一个方形div，将它的某个边框隐藏掉，实现一个三角形：

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid blue;
  border-right: 50px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 50px solid transparent;
}

矩形

既然圆形和三角形是由方形变形而来的，那么矩形就是方形的原形：

<div class="rectangle"></div>

.rectangle {
  width: 200px;
  height: 100px;
  background-color: red;
}

梯形

梯形可以由两个div叠加而成，利用上下两个div大小变化来实现梯形效果：

<div class="trapezoid">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

.trapezoid {
  width: 100px;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  position: relative;
}

.top {
  width: 100%;
  height: 50px;
  background-color: yellow;
  position: absolute;
  top: -50px;
}

.bottom {
  width: 100%;
  height: 0;
  border-top: 50px solid blue;
  position: absolute;
  bottom: -50px;
}

总结：本文介绍了CSS实现各种形状的方法，其中包括圆形、三角形、矩形和梯形。这些形状可以通过改变div的边框、大小、位置等属性来实现，代码简单易懂，可供学习参考。