見出し下線や左縦線を斜線にする
こんな感じや、
こんな感じに、よく見出しデザインで下線や左縦線を引いたりしますが、それを斜線にするやりかたです。
以前紹介した、見出しデザインの斜線編です！
https://qiita.com/hayahayahaya/items/e1b737487bc23748f234
index.html
<h2 class="m-heading2-border">斜線の見出し</h2>
style.scss
.m-border{
background:
linear-gradient(
-45deg,
transparent 25%,#aaa 25%,
#aaa 50%,transparent 50%,
transparent 75%, #aaa 75%
)
left bottom/7px 7px repeat-y;
//-45度の傾きで、25%まで「東名から#aaaに。25%から50%まで#aaaから透明に、50%から75%まで透明から#aaaに。
//left bottomに配置し、7pxに設定。repeat-yで縦方向に、repeat-xで横方向に。
padding-left: 15px;//※これは線との余白感を出すために設定しているのでなくても大丈夫です。※
padding-bottom: 15px;//※これは線との余白感を出すために設定しているのでなくても大丈夫です。※
}
これはいろいろ使えそうなcssかと思います。
内容がわかっていれば、色や太さを変更できたりするので、色々調整してみるのもいいかもです。