帶圓角的傾斜格

Question

如何使用CSS實現以下形狀？

右側應傾斜和頂部角應該是圓角：

Answer 1

可以使用僞元素，邊界半徑和變換旋轉創建圓邊和斜右部：

輸出：FIDDLE

div{ 
 
    display:inline-block; 
 
    padding:1em 5em 1em; 
 
    position:relative; 
 
    overflow:hidden; 
 
    border-top-left-radius: 10px; 
 
} 
 
div:after{ 
 
    content:""; 
 
    position:absolute; 
 
    top:0; left:0; 
 
    width:100%; height:100%; 
 
    background-color:#E70101; 
 
    z-index:-1;  
 
    border-top-right-radius: 15px; 
 
    
 
    -ms-transform: skewX(10deg); 
 
    -webkit-transform: skewX(10deg); 
 
    transform: skewX(10deg); 
 
    
 
-ms-transform-origin:100% 100%; 
 
    -webkit-transform-origin:100% 100%; 
 
    transform-origin:100% 100%; 
 
}

<div>Some text</div>

Answer 2

另一種選擇是使用3D透視變換：http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/