六边形元件，一侧比另一侧宽

Question

我的形状有斜坡边缘底部的问题。 我有这个：

我做了左侧和右侧但我不知道如何修改中央部分。请帮忙。

我的代码。

h3{
    font-size: 60px;
    position: relative;
    display: inline-block;
    padding: 10px 30px 8px 30px;
    height: 80px;
    width: auto;
    background: #000;
    line-height: 80px;
    margin-bottom: 20px;
    font-family: 'Bitter', 'Trebuchet MS', Arial;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
    color: white;

}

h3::before{
    content: '';
    width: 0;
    height: 0;
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 60px solid black;
    position: absolute;
    left: -59px;
    top: 0px;
    background: red;
}
h3::after{
    content: '';
    width: 0;
    height: 0;
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
    position: absolute;
    right: -59px;
    top: 0px;
    background: red;
}

HTML是一个简单的<h3>标头。

Answer 1

检查这个适用于transform perspective

的纯css解决方案

＆＃13;

＆＃13;

div {
    cursor:pointer;
    width:200px;
    height:100px;
    transform:perspective(500px) rotateY(40deg);
    background:orange;
    margin:50px;
    overflow:visible;
}
div:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right:60px solid orange;
    margin-left:-60px;
}
div:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 60px solid orange;
    margin-left:200px;
    transition:.5s all;
}

div:hover{
    background:grey;
}
div:hover:before{
     border-left-color: grey;
}
div:hover:after{
    border-right-color: grey;

}

＆＃13;

<div>

＆＃13;

＆＃13;

＆＃13;