css - 如何创建一个倾斜的一侧和另一侧的圆角的形状？

Question

是否可以在 CSS3 中创建这种形状？如何？我被卡住了： http: //dabblet.com/gist/2962169

h1 {
  background-color: #434b82;
  border-radius: 20px 0 0 20px;
  transform: skew(-20deg);
}

<h1>TEST</h1>

Answer 1

你的意思是这样的

h1 {
    background-color: #434b82;
    border-radius: 20px 0 0 20px;
    width:500px;
    height:40px;
    border-right: 40px solid transparent;
}
h1:after{
    position:absolute;
    width: 80px;    
    border-top: 40px solid #434b82;
    margin-left:500px;
    border-right: 20px solid transparent;
    content:"";
}

<h1></h1>​

Answer 2

我们可以使用linear-gradient()在矩形元素上绘制这个形状。

这个技巧使用将整个形状分成两部分的想法，然后在背景上独立绘制每个部分。

div {
  background-image: linear-gradient(to left, #434b82, #434b82),
                    linear-gradient(to left top, transparent 50%, #434b82 50%);

  background-position: top right 20px, 100% 100%;
  background-size: 100% 100%, 20px 100%;
  background-repeat: no-repeat;
}

div {
  background-image: linear-gradient(to left, #434b82, #434b82),
                    linear-gradient(to left top, transparent 50%, #434b82 50%);
  background-position: top right 20px, 100% 100%;
  background-size: 100% 100%, 20px 100%;
  background-repeat: no-repeat;
  border-radius: 30px 0 0 30px;
  line-height: 50px;
  padding: 0 25px;
  height: 50px;
  width: 200px;
  color: #fff;
}

<div>
    Some Text Here...
</div>