梯形带有圆角和纯css [英] Trapezium shape with rounded corners and pure css

问题描述

我做了很多尝试，但是仍然在用纯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.

推荐答案

具有圆形边缘的梯形形状

您可以使用CSS3属性制作该形状： skewY（）和边界半径。

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

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

输出：

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！