「css3」タグアーカイブ

cssでグラデーションの矢印を作る

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;
}

※グラデーションのベンダープレフィックスは省略

べた塗りの三角形の上にグラデーションの四角形を重ねて表示させてみた
三角形とグラデーションはジェネレーターさんに書いてもらってラクをするのだ

うわー　なんか久しぶりにマジメ。。。