梯形形状，圆角和纯净的CSS

Question

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

我想要实现的形状是包含文本（伦敦，英国）的给定图像中的白色部分。形状类似于阴极射线管或棒球棒。

Answer 1

具有圆边的梯形形状

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

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

<强> DEMO

输出：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;