小さな矢印または三角形のロゴを実装するための純粋な CSS

フロントエンド エンジニアとして、CSS を使用して作業内で小さな矢印、三角形、その他の記号を作成することは避けられません。ここでは、純粋な CSS を使用して小さな矢印、三角形、その他の記号を作成する方法を共有します。

小さな矢印の実装:

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>

三角形の実装:

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>

(無料ビデオ チュートリアル: css ビデオ チュートリアル)

複数の要素を 1 行に表示するにはどうすればよいですか?

(1) 表示: inline は要素をインライン要素に変換しますが、幅と高さの属性は機能しません

(2) 表示: inline-block は要素を 1 行で表示できますが、スペースと改行キーの影響を受けるため、デフォルトの間隔が適用されます

解決策:

1. ラベルがすべて 1 行に収まるように、スペースと改行キーの影響を削除します。 (読みやすさの観点からこの方法は推奨されません) 良くありません)

2. 次の表示を持つ要素の親要素に属性 font-size:0

display:inline-block在ie6 7下不兼容的解决办法？
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout

3 を追加します。 inline-block 属性が追加されました 3. float:left /right を使用しますが、float をクリアする必要があります

関連する推奨事項: CSS チュートリアル

#

以上が小さな矢印または三角形のロゴを実装するための純粋な CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。