CSS 疑似要素で左方向矢印を作るサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
1.position:relative
要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて
自分自身からの相対オフセットで配置されます。
2.transform: rotate(a)
rotate() で生成される回転の量は、 <angle> で指定します。
正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは点対称と呼ばれます。
3.border-top
borderを上に指定します。
4.border-right
borderを右に指定します。
5.:::before
::beforeは、指定したセレクタの開始タグの後にCSSを適用します。
contentに指定した文字列が表示されます。 文字列を表示しない場合は空文字("")にします。
使用例
<!DOCTYPE html> <html> <head> <style> /*セレクターの定義*/ .left_arrow { position: relative; /*横に並べる 幅と高さを指定*/ display:inline-block; } /* 左方向の矢印の表示設定 */ .left_arrow::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; /* 要素の右からの距離 */ right: -22px; /* 幅 */ width: 10px; /* 高さ */ height: 10px; /* borderを上に指定の太さと色 */ border-top: 1px solid skyblue; /* borderを右に指定の太さと色 */ border-right: 1px solid skyblue; /* 左方向へ回転 */ transform: rotate(225deg); } </style> </head> <body> <p class="left_arrow">左テストデータ表示</p> </body> </html>