带有圆角的倾斜div

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/

Answer 3

一行 css 代码，即“clip-path”属性，它甚至可以在 div 标签上工作 查看 https://bennettfeely.com/clippy/ 获取示例或简单的代码片段