倾斜的div有圆角

Question

如何使用CSS实现以下形状？

右侧应该是倾斜的，顶角应该是圆的：

Answer 1

您可以使用伪元素，border-radius和变换旋转来创建圆角边和右斜边部分：

输出： 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/