ボーダーボトムに矢印を付ける方法

2024-02-09 22:42 CSS デザインボーダースタイル

CSS の ::before または ::after 擬似要素を使用する方法:
```
.arrow-border::before {
 content: "";
 position: absolute;
 bottom: -10px;
 left: 50%;
 transform: translateX(-50%);
 border-width: 10px;
 border-style: solid;
 border-color: transparent transparent #000 transparent;
}
```
上記のコードでは、.arrow-border クラスを持つ要素の下部に矢印が表示されます。矢印のスタイルは border-color プロパティで指定します。
SVG アイコンを使用する方法:
```
<div class="arrow-border">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
   <path d="M8 0l8 16H0z" fill="#000"/>
 </svg>
</div>
```
上記のコードでは、.arrow-border クラスを持つ要素内に SVG アイコンが表示されます。このアイコンは矢印の形状を持ち、fill 属性で色を指定できます。

これらは一部の方法ですが、他にもさまざまなアプローチがあります。使用するコンテキストや要件に応じて、最適な方法を選択してください。以上の方法とコード例は、ボーダーボトムに矢印を追加するための参考となるでしょう。