【備忘録】htmlにおける斜めの要素

概要

PROJECTS | aircordがかっこ良くて

この斜めの要素ってどうやってcss書いてるんだろうと調べた時の備忘録

やり方

transform:skew()－CSS3リファレンス に従う。

やってみる

まずはcss

    .yamadagenki-20160229{
      position: relative;
      background-color: limegreen;
      width: 200px;
      height: 200px;
    }

    .yamadagenki-20160229 .naname1{
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: red;
      transform: skewX(20deg);
      width: 100px;
      height: 100px;
    }

    .yamadagenki-20160229 .naname2{
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: red;
      transform: skewY(20deg);
      width: 100px;
      height: 100px;
    }

    .yamadagenki-20160229 .naname3{
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: red;
      transform: skew(-20deg,-20deg);
      width: 100px;
      height: 100px;
    }
    .yamadagenki-20160229 .naname4{
      position: absolute;
      top: 50px;
      left: 50px;
      transform: skew(20deg,20deg);
      width: 100px;
      height: 100px;
    }

X方向に。。。

    <div class="yamadagenki-20160229">
      <div class="naname1">てへへ</div>
    </div>

てへへ

Y方向に。。。

    <div class="yamadagenki-20160229">
      <div class="naname2">てへへ</div>
    </div>

てへへ

字だけまっすぐに。。。

    <div class="yamadagenki-20160229">
      <div class="naname3"><p class="naname4">てへへ</p></div>
    </div>

てへへ

まとめ

これ使いこなして、かっこいいデザインやってみたいなぁ。