带圆角的倾斜 div

Question

How can I implement the following shape using CSS?

The right side should be slanted and the top corners should be rounded :

Answer 1

You can use pseudo-elements, border-radius and transform rotate to create the rounded edges and the oblique right part :

output : 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/