Trapezium shape with rounded corners and pure css

问题

I tried a lot but still struggling with making this trapezoid shape with pure css.

The shape that I am trying to achieve is the white coloured portion in the given image containing the text (London,UK). The shape is like a cathode ray tube or a baseball bat.

回答1:

Trapezoid shape with rounded edges

You can make that shape with CSS3 properties : skewY() and border-radius.

This technique needs 2 elements to create the CSSS-shape, one for the trapezoid and one for the rounded corners. Both elements need the :after and :before pseudo elements.

DEMO

output :

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>

来源：https://stackoverflow.com/questions/23711059/trapezium-shape-with-rounded-corners-and-pure-css