CSS 歪みを使ったデザイン

transformのskewX , skewY を使えば要素を歪められる

引数は角度
transform: skewX(30deg);

歪みを使ったデザインを3つ用意しました。

その1 skewX

<div class="box1">
<h1 class="text">Hello World!</h1>
</div>

.box1{
  display: inline-block;
  margin-left: 1em;
  padding: 0 1em;
  background-color: blue;
  transform: skewX(30deg);
}

.box1 .text{
  margin: 0;
  padding: 0;
  color: white;
  
  /* 親の要素の回転と逆回転で指定 */
  transform: skewX(-30deg);
}

その2 skewX と 角丸

<div class="box2">
<h1 class="text">Howdy!</h1>
</div>

.box2{
  display: inline-block;
  margin-left: 1em;
  padding: 0 1em;

  /* 角丸 */
  border-radius: 5px;
  background-color: green;
  transform: skewX(-30deg);
}

.box2 .text{
  margin: 0;
  padding: 0;
  color: white;

  /* 親の要素の回転と逆回転で指定 */
  transform: skewX(30deg);
}

その3 skewY と 縦書き

<div class="box3">
<h1 class="text">こんにちは、世界。</h1>
</div>

.box3{
  display: inline-block;
  width: 3em;
  margin-top: 1em;
  margin-left: 1em;
  padding: 1em 0;
  background-color: red;
  transform: skewY(30deg);
}

.box3 .text{
  margin: 0;
  padding: 0;
  color: white;

  /* 親の要素の回転と逆回転で指定 */
  transform: skewY(-30deg);

  /* 縦書き */
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}