css - CSS 変換要素

Question

CSStransformプロパティを使用して、次のようなボタンを作成するにはどうすればよいですか。

skew、rotate、rotate3dおよびperspective運なしで遊んでみました。これらの新しい特性のいくつかを理解するには、数学者になる必要があるかのように感じます

Answer 1

3 つの軸すべてに沿って回転させたり、ゆがめたりする必要があります。次に例を示します。

div {
    perspective: 200px; 
    width: 150px;
    position: relative;
    color: white;
    line-height: 2.4;
    text-align: center;
    padding-left: 20px;
}

div::before {
    content: '';
    z-index: -1;
    position: absolute;
    background: #7fc552;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: skew(-9deg) rotateX(-22deg) rotateY(-21deg) rotateZ(-9deg);
    /* Firefox seems to render this with pretty bad jagged edges.
       Add a transparent outline to fix that. */
    outline: 1px solid transparent;
}

ライブデモはこちら: http://codepen.io/JosephSilber/pen/Jvohk/

Answer 2

この形状を実現するにはさまざまな方法があります。次のツールと方法を確認してください。

イメージマップ:

http://www.maschek.hu/imagemap/imgmap

説明: 通常の画像をアップロードし、クリック可能な領域をマッピングします

---

画像マスク:

http://thenittygritty.co/css-masking

説明: 使用する画像のカスタム ボーダー シェイプを作成します

---

SVG:

http://www.w3schools.com/svg/svg_polygon.asp

説明: 目的の形状を実現するために、html を使用して多角形ベクトルを作成します。