CSS 疑似要素で左方向矢印を作るサンプル

2022年11月4日

環境
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>

CSS

Posted by arkgame

関連記事: