after疑似要素を使用して中空の三角矢印とXアイコンを実装する例

フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き矢印アイコンがよく見られます。 CSS を実装する方法はたくさんあります。試してみると、覚えるのが簡単ではないことがわかりました。今日は after 疑似要素を使用して実装する簡単な方法を記述します。

1.閉じるアイコン

關閉圖標

HTML部分

<span class="閉じる"></span>

CSS部分

。近い{
    表示: インラインブロック;
    幅: 14px;
    高さ: 1px;
    背景: #95835e;
    変換: 回転(45度);
    -webkit-transform: 回転(45度)。
}
.suClose:after {
    コンテンツ： '';
    表示: ブロック;
    幅: 14px;
    高さ: 1px;
    背景: #95835e;
    変換: 回転(-90度);
    -webkit-transform: 回転(-90度);
}

原理としては、span 要素と after 疑似要素を使用して 2 本の直線を描き、CSS3 の transform 属性を使用してそれらを個別に回転させて交差の効果を実現します。

2. 中空の三角形の矢印

向上箭頭

HTML部分

<span class="arrowUp"></span>

CSS部分

.arrowUp:after {
    コンテンツ： '';
    表示: インラインブロック;
    幅: 8px;
    高さ: 8px;
    上境界線: 1px 実線 #656565;
    右境界線: 1px 実線 #656565;
    変換: 回転(-45度);
    -webkit-transform: 回転(-45度);
}

右箭頭

HTML部分

<span class="arrowUp"></span>

CSS部分

.arrowUp:after {
    コンテンツ： '';
    表示: インラインブロック;
    幅: 8px;
    高さ: 8px;
    上境界線: 1px 実線 #656565;
    右境界線: 1px 実線 #656565;
    変換: 回転(45度);
    -webkit-transform: 回転(45度)。
}

原則としては、after 疑似要素を使用して四角形を描画し、上と右の境界線のみを描画して矢印の形状を形成し、次に transform 属性を使用して角度を調整し、さまざまな方向を実現します。ここでは 2 つの方向の例を示します。他の 2 つの方向については、角度を変更するだけです。

after疑似要素を使用して白抜き三角矢印とXアイコンを実装する例についてはこれで終わりです。afterで白抜き三角矢印とXアイコンを実装する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を続けて閲覧してください。今後とも123WORDPRESS.COMを応援してください。

<<: HTML ページ内の js および css ファイルのキャッシュを自動的にクリーンアップします (バージョン番号を自動的に追加します)

>>: nodejs + koa + typescript の統合と自動再起動に関する問題