Css 一元半六边形

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

我猜我需要一些

：before

和

：after

伪元素以及以下css：

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

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

---

使用边框方法：

您可以使用下面的CSS来实现。该形状是通过使用

：after

伪元素在矩形底部放置一个三角形来获得的。三角形部分使用

border

方法实现

。五角大楼{
高度：50px；
宽度：78px；
背景：#3a93d0；
位置：相对位置；
}
五角大楼：之后{
边框：39px实心#3a93d0；
边框顶部宽度：15px；
边框颜色：#3a93d0透明；
位置：绝对位置；
顶部：50px；
内容：''；
}

-基本上它使用和a来为三角形指定位置

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

#五角大楼
{ 
位置：相对位置；
宽度：54px；
边框宽度：40px 18px 0；
边框样式：实心；
边框颜色：#3a93d0；
}
#五角大楼：之后{
边框颜色：#3a93d0透明；
边框样式：实心；
边框宽度：21px45px0；
内容：“；
身高：0；
左：-17px；
位置：绝对位置；
排名：0；
宽度：0；
}

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

莫格雷先生
{
宽度：1000px；
高度：30px；
背景#3f30f40；
}
.箭头向下
{
边框顶部：50px实心#3f30f40；
左边框：500px实心透明；
边框底部：500px实心透明；
右边框：500px实心透明；
显示：块；
宽度：0px；
高度：10px；
}
http://jsfiddle.net/jmqoj5nh/1/

您可以使用transform

scaleX

和

rotate:45deg；

尝试另一种方法。这使得创建形状的底部非常容易

工作

*抱歉，gif质量不好！：(

无边框：

#pent{
高度：50px；
宽度：100px；
位置：相对位置；
背景颜色：深蓝；
}
#彭特：以前{
内容：''；
位置：绝对位置；
底部：0；
左：0；
宽度：45px；
高度：45px；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
变换原点：0.100%；
-webkit变换：scaleX（1.57）旋转（45度）；
-moz变换：scaleX（1.57）旋转（45度）；
-ms变换：scaleX（1.57）旋转（45度）；
变换：scaleX（1.57）旋转（45度）；
背景颜色：深蓝；
}

---

看一看这里可能的重复，这是一个什么样的重复，它是一个不同的形状？！你不需要“额外的角度计算”！可以使用

scaleX

+

旋转45度
@theparagratick完成：这仍然需要计算比例，就像你的样本中的1.57。
<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>

transform: scaleX() rotate(45deg);