半六边形,带一个元素

Question

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

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

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

Answer 1

使用边框方法:

你可以使用下面的CSS来做到这一点.通过使用:after伪元素在矩形的底部放置三角形来获得形状.使用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方法不同.缺点是它需要额外的角度计算.

正是在这种提到的短三角形方法的修改版本CodePen演示通过网络提基.

.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变换:

这种方法仅使用skew()(沿X轴和Y轴)并且不需要任何复杂的角度计算.它只需要调整伪元素的维度和位置,因为父元素的维度会发生变化.

.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)被删除,不应再使用了.的矩阵分辨率的网站可以用来获得等价矩阵功能.矩阵函数rotate(45deg) skew(-22.5deg, -22.5deg)是

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

使用剪辑路径:

这是另一种创建五边形形状的方法clip-path.clip-path根据所需的浏览器支持,可以使用纯CSS 或具有内联SVG的CSS .CSS clip-path目前仅由Webkit浏览器支持.

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>