圆角和纯css的梯形形状

Question

我做了很多尝试，但仍然在努力用纯css制作这个梯形形状。

我试图实现的形状是包含文本的给定图像中的白色部分(伦敦，英国)。这个形状就像阴极射线管或棒球棒。

​

Answer 1

圆角梯形形状

您可以使用CSS3属性：skewY()和border-radius创建该形状。

这种技术需要2个元素来创建CSSS形状，一个用于梯形，另一个用于圆角。这两个元素都需要:after和:before伪元素。

演示

产出：

​

​

​

body{
    background:#D0C0A9;
    margin:0;
}
.tpz1{
    background:none;
    width:500px;
    height:200px;
    margin:100px auto;
    position:relative;
    z-index:1;
}
.tpz2{
    width:100%;
    height:100%;
    line-height:200px;
    font-size:60px;
    text-align:right;
}
div:after,div:before{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    background:#fff;
    z-index:-1;
}
.tpz1:before, .tpz1:after{
     -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    
    -webkit-transform: skewY(4deg);
    transform: skewY(4deg);
}
.tpz1:after{
   -webkit-transform: skewY(-4deg);
    transform: skewY(-4deg);
}
.tpz2:before,.tpz2:after{
    border-radius:50%;
    width:30%;
    left:-13%;
}
.tpz2:after{
    left:80%; top:-17.5%;
    width:40%;
    height:135%;
}

<div class="tpz1"><div class="tpz2">London, UK</div></div>

​