用css3边界半径制作一个梯形

Question

我想制作一个像这张照片一样有边框半径的梯形。有可能吗？

我尝试了这段代码，但它不起作用

background: #BE1E2D;
width: 130px; 
height: 75px;
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg);
transform: skew(20deg);

Answer 1

Visit this website to look at how a lot of shapes are done.

对于这种形状（因为它在网站上），你需要这个：

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    background: red;
}

Answer 2

试试这个。但是不使用border-radius。

.trapezoid{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
     transform: skew(-20deg); 
     -o-transform: skew(-20deg); 
     -moz-transform: skew(-20deg); 
     -webkit-transform: skew(-20deg);
}

Answer 3

我看不出你如何用border-radius（或者你想要的原因）来做到这一点

你可以通过一个简单的倾斜来做到这一点：

#shape {
    width: 150px;
    height: 50px;
    -webkit-transform: skew(-25deg);
       -moz-transform: skew(-25deg);
         -o-transform: skew(-25deg);
    background: darkred;
}

DEMO