html - 一侧宽于另一侧的六 Angular 形元件

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

Answer 1

检查这个纯 css 解决方案，它适用于 transform perspective

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;

}

<div>