制作具有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

訪問此網站以查看完成許多形狀的過程。

對於這種形狀（如網站上所示），您需要這樣做：

#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