一个元素的半六边形答案

【问题标题】：Half hexagon shape with one element一个元素的半六边形
【发布时间】：2015-02-23 14:56:59
【问题描述】：

我正在尝试复制以下形状，但没有成功：

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

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

【问题讨论】：

css-tricks.com/examples/ShapesOfCSS
看这里html-generator.weebly.com/css-shape-generator.html
How does this CSS triangle shape work?的可能重复
这是怎么复制的，形状不一样？！

标签： css css-shapes

【解决方案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: '';
}

&lt;div class="pentagon"&gt;&lt;/div&gt;

使用 CSS 变换：

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

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

.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 轴）并且不需要任何复杂的角度计算。它只需要随着父元素的尺寸变化而调整伪元素的尺寸和位置。

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

上面的 sn-p 使用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。 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>

【讨论】：

您不需要“额外的角度计算”！可以使用scaleX + rotate 45deg
@ThePragmatick：这仍然需要像样本中的 1.57 那样计算比例百分比。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果你不想使用 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>

【讨论】：

【解决方案5】：

您可以尝试使用变换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;
}

&lt;div id="pent"&gt;&lt;/div&gt;

带边框：

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

&lt;div id="pent"&gt;&lt;/div&gt;

【讨论】：