半六边形，带一个元素

Question

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

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

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

Answer 1

使用边框方法：

你可以使用下面的CSS来做到这一点。通过使用:after伪元素在矩形的底部放置三角形来获得形状。使用border方法实现三角形部分。

＆＃13;

＆＃13;

.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: '';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

使用CSS转换：

此方法使用rotate，skewX，因此需要完全符合CSS3标准的浏览器才能正常运行。这种方法的优点是，与使用border方法不同，它允许在形状周围添加边框。缺点是它需要额外的角度计算。

这是CodePen demo web-tiki中提到的短三角形方法的修改版本。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

---

使用CSS偏斜变换：

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

---

使用剪辑路径：

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试使用转化scaleX和rotate: 45deg;的替代方法。这样可以很容易地创建形状的底部。

transform: scaleX() rotate(45deg);

<强>工作

*抱歉质量不好的gif！ ：（

没有边框：

<强> Fiddle

#pent{
    height: 50px;
    width: 100px;
    position: relative;
    background-color: deepskyblue;
}
#pent:before{
    content: '';
    position: absolute;
    bottom: 0; 
    left: 0;
    width:45px; 
    height:45px;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleX(1.57) rotate(45deg);
    -moz-transform: scaleX(1.57) rotate(45deg);
    -ms-transform: scaleX(1.57) rotate(45deg);
    transform: scaleX(1.57) rotate(45deg);
    background-color: deepskyblue;
}

<div id="pent"></div>

有边框：

<强> Fiddle

#pent{
    height: 50px;
    width: 100px;
    position: relative;
    border: 1px solid black;
    border-bottom: 0;
}
#pent:before{
    content: '';
    position: absolute;
    bottom: 0; 
    left: -1px;
    width:45px; 
    height:45px;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleX(1.57) rotate(45deg);
    -moz-transform: scaleX(1.57) rotate(45deg);
    -ms-transform: scaleX(1.57) rotate(45deg);
    transform: scaleX(1.57) rotate(45deg);
    border: 1px solid black;
    border-top: 0;
    border-left: 0;
}

<div id="pent"></div>

Answer 3

See a demo - 基本上它使用css triangles和pseudo element来为三角形提供一个位置。

.shape {
    position: relative;
    width: 78px;
    height:30px;
    background:#3a93d0;
}

.shape:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 39px 0 39px;
    border-color: #3a93d0 transparent transparent transparent;
}

Answer 4

<style>
#pentagon
{ 
    position: relative;
    width: 54px;
    border-width: 40px 18px 0;
    border-style: solid;
    border-color: #3a93d0;
}


#pentagon:after {
    border-color: #3a93d0 transparent transparent;
    border-style: solid;
    border-width: 21px 45px 0;
    content: "";
    height: 0;
    left: -17px;
    position: absolute;
    top: 0;
    width: 0;
}

</style>

Answer 5

如果您不想使用css3，可以使用css 唯一的问题是这个实现没有响应。 ：（

<pre>

    <div class="moregrey"></div>
    <div class="arrowdown"></div>

    .moregrey
    {
        width: 1000px;
        height: 30px;
        background: #3f3f40;
    }
    .arrowdown
    {
        border-top:50px solid #3f3f40;
        border-left:500px solid transparent;
        border-bottom:500px solid transparent;
        border-right:500px solid transparent;
        display:block;
        width:0px;
        height:10px;
    }

</pre>

<pre>
 http://jsfiddle.net/jmqoj5nh/1/
</pre>