在 CSS 中制作各种形状很容易。正方形和长方形是 Web 开发中最常见和最自然的形状。您需要添加宽度和高度，仅此而已。创建前两个形状。添加边界半径，你就有了圆形和椭圆形。

更复杂的形状需要添加伪元素或更多 HTML :before。:after这为我们提供了另外两种形状来创建复杂的东西。在创造不同的形状方面，你最好的朋友将是transform和position。

设计师下面的大多数形状都会导出为图像，但正如我们所知 - 我们应该用 CSS 替换简单的图像加快我们的网站。

请记住：所有形状都是box-sizing: border-box;在身体上构建的！

让我们从基本形状开始。

星形 - 5分

<div class="star_5"></div>

.star_5 {
  position: relative;
  width: 0px;
  height: 0px;
  display: block;
  border-right: 100px solid transparent;
  border-bottom: 70px solid orange;
  border-left: 100px solid transparent;
  transform: rotate(35deg);}.star_5:before {
  content: '';
  position: absolute;
  display: block;
  top: -45px;
  left: -65px;
  border-bottom: 80px solid orange;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 0;
  transform: rotate(-35deg);}.star_5:after {
  content: '';
  position: absolute;
  display: block;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid orange;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);}

TAGS CSS CSS 创建基本 创建基本 高级的形状 高级的形状