【初心者でもわかる】CSSだけで作る、端の丸い矢印(>)の作り方 - Qiita

.arrow { width: 200px; /* 適当な箱を作るための幅 */ height: 80px; /* 適当な箱を作るための高さ */ border: 1px solid #000; /* わかりやすいように線を引く */ position: relative; /* 基準位置とする */ } .arrow::before, .arrow::after { content: ""; /* 疑似要素に指定必須 */ width: 20px; /* 線の長さを指定 */ height: 3px; /* 線の幅を指定 */ display: inline-block; /* インラインブロックにする */ border-radius: 2px; /* 線を角丸にする */ background: #aaa; /* 線の色を指定 */ position: absolute; /* 相対