CSS 实现：常见几何图形绘制

1 三角形

border 实现

首先将元素内容宽高设置为 0，设置每个border 宽和样式后是四个三角形。

.border-triangle {
  width: 0;
  height: 0;
  border-top: 20px solid green;
  border-right: 20px solid blue;
  border-bottom: 20px solid red;
  border-right: 20px solid black;
}

 

然后删除指定方向对侧的 border： 

.border-triangle {
  width: 0;
  height: 0;
  /* border-top: 20px solid green; */
  border-right: 20px solid blue;
  border-bottom: 20px solid red;
  border-right: 20px solid black;
}

最后将非指定方向上的 border 设置为透明： 

.border-triangle {
  width: 0;
  height: 0;
  /* border-top: 20px solid green; */
  border-left: 20px solid transparent;
  border-bottom: 20px solid red;
  border-right: 20px solid transparent;
}

 

等边三角形：通过设置border宽度比为：指定方向 / 非指定方向 = ​​​​​​即可。

角落三角形：只设置相邻两个 border 的宽度，且其中一个设置为 transparent。

线性渐变实现：

实现一个 45° 方向的线性渐变容器，在 50% 的位置向后设置为透明：

.linear-gradient-triangle {
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, #ff1493, #ff1493 50%, transparent 50%, transparent 100%);
}

圆锥渐变实现：

首先圆心点设置于 50% 0 即 center top（容器最上方的中间），设置转动初始方向是 90deg。转动 45deg 即可，后面都是透明（多出来的 0.1deg 是为了简单消除渐变产生的锯齿的影响）：

.conic-gradient-triangle {
  width: 100px;
  height: 50px;
  background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg)
}

rotate 旋转实现：

首先父容器设置相对定位，子元素绝对定位，设置子元素的旋转中心在左下角 left bottom，然后进行旋转到相应角度即可。

.transform-rotate-triangle {
  position: relative;
  width: 100px;
  height: 50px;
  overflow: hidden;
}
.transform-rotate-triangle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: deeppink;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

clip-path 剪切实现：

clip-path 创建剪切区域。区域内的显示，区域外的隐藏。

.clip-path-triangle {
  width: 50px;
  height: 50px;
  background-color: deeppink;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

十进制 Unicode 字符实现，可以通过 transform 旋转 （rotate ）或者缩放（scale） ，来改变三角形的方向和大小：

/*
  三角形字符：
    ◄ : ◄
    ► : ►
    ▼ : ▼
    ▲ : ▲
    ⊿ : ⊿
    △ : △
*/
.unicode-triangle {
  font-size: 50px;
  color: deeppink;
}

 阴影三角形：

利用十进制 Unicode 字符实现三角形，并添加文字阴影。

.shadow-triangle {
  display: inline-block;
  transform: scaleX(2.5);
  color: #bada55;
  text-shadow: 0 2px 2px rgba(255, 255, 255, 0.7), 0 10px 4px rgba(0, 0, 0, 0.5);
  font-size: 32px;
  cursor: pointer;
}

.shadow-triangle:hover {
  transition: all 0.2s ease;
  transform: scaleX(2.5) translateY(4px);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

2 梯形

border 实现：在三角形 border 实现中，通过只修改元素的一个方向的尺寸（宽或高）可以将该方向上的 border 变成梯形：

.trapezoid {
  width: 100px;
  height: 0;
  border-left: 20px solid transparent;
  border-bottom: 20px solid #ff6b6b;
  border-right: 20px solid transparent;
}

通过设置元素的宽度，可以同时修改梯形的上下底长度；通过设置 border-left-width 和 border-right-width 可以修改底角大小，border 越宽，底角越小。另外还可以设置 border-bottom-width，从而控制梯形的高度。如果要改变梯形的方向，则应该改变元素 height 的值，元素 width 保持为 0。

3 正方形

vw 实现：

将盒子的宽高设置为相同的数值和计量单位 vw 或 vh（一般使用 vw）。

.vw-square {
  width: 10vw;
  height: 10vw;
  background-color: skyblue
}

padding 实现：

由于 margin 和 padding 的百分比数值是相对于包含块的宽度的。将元素垂直方向的一个 padding 值设定为与 width 相同的百分比即可。但是会导致在元素上设置 max-height 属性失效。

.padding-square {
  width: 10%;
  /* 解决内容将元素撑高的问题 */
  height: 0;
  padding-bottom: 10%;
  background-color: skyblue;
}

伪元素实现：

若利用 margin，容器与伪元素在垂直方向发生了外边距折叠，需要在父元素即容器上触发 BFC，padding 则不需要：

.pseudo-square {
  width: 10%;
  /* 伪元素使用 margin-top 时，需要触发 BFC, padding 则不需要 */
  overflow: hidden; /* 最好使用 display: flow-root */
  background-color: skyblue;
}

.pseudo-square::before {
  content: '';
  display: block;
  /* margin 百分比相对于包含块宽度计算 */
  margin-top: 100%;
}

4 同心圆

单个元素 box-shadow 实现：

.box-shadow-circle {
  width: 20px;
  height: 20px;
  margin: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px red, 0 0 0 10px blue, 0 0 0 10px green;
}

单个元素 repeat-radial-gradient 重复径向渐变实现：

.repeat-radial-gradient-circle {
  width: 20px;
  height: 20px;
  margin: 16px;
  border-radius: 50%;
  background: repeat-radial-gradient(red, yellow 10%, green 15%);
}

 

5 五角星

五角星可以看作是由三个三角形拼接而成的。

.pseudo-pentagram {
  width: 0;
  height: 0;
  color: red;
  margin: 50px 0;
  position: relative;
  display: block;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  transform:rotate(35deg);
}

.pseudo-pentagram::before {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 80px solid red;
  position: absolute;
  top: -45px;
  left: -65px;
  color: white;
  display: block;
  content: "";
  transform:rotate(-35deg);
}

.pseudo-pentagram::after {
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  color: red;
  top: 3px;
  left: -105px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  content: "";
  transform:rotate(-70deg);
}

6 正六边形

方法一：把正六边形分成三部分，左中右分别是：before 伪元素部分，div 部分，after 伪元素部分：

.pseudo-hexagon {
  position: relative;
  width: 50px;
  height: 86.6px;
  margin: 0 auto;
  background-color: red;
}
.pseudo-hexagon::before,
.pseudo-hexagon::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 43.3px solid transparent;
  border-bottom: 43.3px solid transparent;
}
.pseudo-hexagon::before {
  right: 50px;
  border-right: 43.3px solid transparent;
}
.pseudo-hexagon::after {
  left: 50px;
  border-left: 43.3px solid transparent;
}

方法二：正六边形分成三个宽高相同的 div，然后使用定位以及 css3 transform:rotate 分别向左右旋转 60deg 形成正六边形。

.transform-hexagon {
  position: relative;
  width: 100px;
  margin: 0 auto;
}
.transform-hexagon .rectangle1,
.transform-hexagon .rectangle2,
.transform-hexagon .rectangle3 {
  width: 50px;
  height: 86.6px;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}
.transform-hexagon .rectangle2,
.transform-hexagon .rectangle3 {
  position: absolute;
  top: 0;
  left: 25px;
}
.transform-hexagon .rectangle2 {
  transform: rotate(60deg);
}
.transform-hexagon .rectangle3 {
  transform: rotate(-60deg);
}