cssだけでグラデーションの矢印を作成する方法を自分用にメモ
スマホサイトのコーディングで使用したんで忘れないうちに
※PCでの表示確認はChromeだけ
- こんな感じに上が白でだんだん下に向かって色がついてる三角矢印
-
コードはこんな感じ
html
<p class="hoge">
<span class="hogearrow"></span><span class="hogearrow_bg"></span>
</p>
css
.hoge{
height:60px;
position:relative;
}
.hogearrow{
width:0;
height:0;
border-style:solid;
border-width:60px 70px 0 70px;
border-color:#007bff transparent transparent transparent;
position:absolute;
top:0;
left:0;
}
.hogearrow_bg{
background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
width:140px;
height:60px;
display:block;
position:absolute;
top:0;
left:0;
}
※グラデーションのベンダープレフィックスは省略
べた塗りの三角形の上にグラデーションの四角形を重ねて表示させてみた
三角形とグラデーションはジェネレーターさんに書いてもらってラクをするのだ
うわー なんか久しぶりにマジメ。。。
