css - 梯形，圆 Angular 和纯CSS

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

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

最佳答案

圆形边缘的梯形形状

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

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

DEMO

输出：

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>

关于css - 梯形，圆 Angular 和纯CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23711059/