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()この形状を長方形の要素に描画するために使用できます。

このトリックは、図形全体を 2 つの部分に分割し、それぞれの部分を背景に個別に描画するというアイデアを使用しています。

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>