如何在对面创建一个倾斜的侧面和圆角的形状？

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

你的意思是this

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>