css - 一个元素的半六边形

Question

我试图复制以下形状但没有成功:

我猜我需要一些 :before 和 :after 伪元素以及以下 css:

#pentagon {
    position: relative;
    width: 78px;
    height:50px;
    background:#3a93d0;
} 

Answer 1

使用边框方法:

您可以使用以下 CSS 来完成。该形状是通过使用 :after 伪元素在矩形底部放置一个三 Angular 形来获得的。三 Angular 形部分是使用border方法实现的。

.pentagon {
  height: 50px;
  width: 78px;
  background: #3a93d0;
  position: relative;
}
.pentagon:after {
  border: 39px solid #3a93d0;
  border-top-width: 15px;
  border-color: #3a93d0 transparent transparent transparent;
  position: absolute;
  top: 50px;
  content: '';
}

<div class="pentagon"></div>

---

使用 CSS 转换:

此方法使用rotate、skewX，因此需要完全兼容 CSS3 的浏览器才能正常工作。这种方法的优点是它允许在形状周围添加边框，这与使用 border 方法不同。缺点是需要额外计算 Angular 。

是这个CodePen demo中提到的短三 Angular 法的修改版通过 web-tiki .

.pentagon {
  position: relative;
  height: 50px;
  width: 78px;
  background: #3a93d0;
}
.pentagon:before {
  position: absolute;
  content: '';
  top: 12px;
  left: 0;
  width: 46px;
  height: 38px;
  background: #3a93d0;
  transform-origin: 0 100%;
  transform: rotate(29deg) skewX(-30deg);
}
.pentagon.bordered {
  background: white;
  border: 1px solid #3a93d0;
}
.pentagon.bordered:before {
  width: 44px;
  height: 37px;
  background: white;
  border: 1px solid #3a93d0;
  border-color: transparent #3a93d0 #3a93d0 transparent;
  transform: rotate(29deg) skewX(-30deg);
}
/* Just for demo */

.pentagon {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="pentagon"></div>
<div class="pentagon bordered"></div>

---

使用 CSS 倾斜变换:

此方法仅使用 skew()(沿 X 轴和 Y 轴)并且不需要任何复杂的 Angular 计算。它只需要伪元素的尺寸和位置随着父级尺寸的变化而调整。

.pentagon {
  position: relative;
  height: 50px;
  width: 78px;
  border: 1px solid #3a93d0;
  border-bottom: none;
  background: aliceblue;
}
.pentagon:before {
  position: absolute;
  content: '';
  top: 10px;  /* parent height - child height -1px */
  left: -1px;
  width: 39px;
  height: 39px;  /* width of parent/2 */
  border-right: 1px solid #3a93d0;
  border-bottom: 1px solid #3a93d0;
  background: aliceblue;
  transform-origin: 0 100%;
  transform: matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0);
}

<div class="pentagon">
</div>

上面的代码片段使用了matrix 转换，因为根据 MDN , skew(x, y) 被移除，不应再使用。 Matrix Resolutions site 可用于获取等效矩阵函数。 rotate(45deg) skew(-22.5deg, -22.5deg) 的矩阵函数是

matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0).

---

使用剪辑路径:

这是使用 clip-path 创建五边形的另一种方法。根据所需的浏览器支持，可以使用纯 CSS clip-path 或带有内联 SVG 的。目前只有 Webkit 浏览器支持 CSS clip-path。

IE(所有版本)不支持 CSS 或 SVG 剪辑路径。

.pentagon {
  position: relative;
  width: 75px;
  height: calc(75px / 1.414);
  background: #3a93d0;
}
.pentagon.css {
  -webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
.pentagon.bordered:after {
  position: absolute;
  content: '';
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  left: 1px;
  top: 1px;
  background: white;
}
.pentagon.css.bordered:after {
  -webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg.bordered:after {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
/* Just for demo */

.pentagon {
  margin: 10px;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <path d="M0,0 0,0.66 0.5,1 1,0.66 1,0z" />
    </clipPath>
  </defs>
</svg>

<h3>CSS Clip Path</h3>

<div class="pentagon css"></div>
<div class="pentagon bordered css"></div>

<h3>SVG Clip Path</h3>
<div class="pentagon svg"></div>
<div class="pentagon bordered svg"></div>