疑似要素 ::after で三角形(borderで生成)をいろんな物にくっつける

0
1195
views

CSS3 の border 機能を応用して三角形を作成することができますが、この三角形をパーツ化して、いろいろな物の後ろにくっつけてみます。 くっつけ方のアイディア次第でいろんな形を創作することも可能です。

三角形をくっつける対象を作る

まずは疑似要素をくっつける対象物としてオーソドックスな長方形を作ります。

html

CSS

.quadrangle {
    width: 200px;
    height: 100px;
    background: blue;
}

実行結果

疑似要素 ::after で三角形を作る

CSS

.quadrangle {
    width: 200px;
    height: 100px;
    background: blue;
}
.quadrangle::after {
    content: ' ';
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 100px 100px;
    border-left-color: rgba(255, 0, 0, 0.5);
}

属性 quadrangle クラスに ::after 要素を付加して新たに .quadrangle::after 属性を作ります。作った属性のプロパティでは content:’ ‘ を指定することで疑似要素の表示を可能にします。

プロパティではさらに border 機能を使って三角形を描写します。

実行結果

疑似要素で三角形を作ったものの、位置も大きさもまるで合ってません。

位置/大きさ合わせ

そこで疑似要素の対象物に position:relative を適用し、疑似要素には position:absolute を適用します、top、left を指定することで位置を合わせます。

大きさも合っていないので、対象物に疑似要素を合わせるために border-width を 50px 50px に変更します。

CSS

.quadrangle {
    position: relative;
    width: 200px;
    height: 100px;
    background: blue;
}
.quadrangle::after {
    position: absolute;
    left: 100%;
    top: 0;
    content: ' ';
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 50px 50px;
    border-left-color: rgba(255, 0, 0, 0.5);
}

実行結果

対象物と疑似要素がいい感じでフィットしましたね。

最終調整

では最後に疑似要素の色を対象物に合わせます。

border-left-color: blue;

完成

なんか変な形ができました。アイディア次第で、調整を加えていけば様々な形を再現することができますね。