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

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

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

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


ベイマックス

騙されちゃいけないよ
心温まるかもしれないけど、それ以上にヒーロー映画だった(笑)

頭良過ぎて何事も真剣になれないヒロ
でも、そこはやっぱり14歳の少年
兄のタダシに上手くのせられて、タダシが通う工科大学をお受験しちゃったり
全てが上手くいってるかと思ってたら、事故でタダシが亡くなってしまい落ち込むヒロ
こっから宣伝のようにタダシが作っていたケア・ロボット「ベイマックス」との、ほのぼの感動物語かと思ったら、おいおい、そうきましたかってね
全く予想外の展開にビックリしつつも、物語に退屈する事もなく、どんどん引き込まれていきましたよ

原題の「Big Hero 6」これが全てだし、最後にスタン・リー出てくるなんて、ねぇ

どうでもいいけど、どうしてもタダシがピエール瀧さんに見えてしょうがないのですよ。。。www

◎観た日:2014年12月29日

画像:ベイマックスのイメージ


ホビット「決戦のゆくえ」

やっと終わったって感じ
前2作とにかく長い、長い
今回も長い 途中スローモーションになるシーンの意味が分からん
それでも、前よりは戦闘シーンが続くんでまだいいのかなぁ。。。

性格的にいっちゃったドワーフのトーリンが良い奴に戻るのはいいね
思うとこは色々あるだろうけど、ドワーフ、エルフ、人間(+ビルボと灰色のガンダルフか)が一緒くたになってドンパチドンパチ
レゴラスなんて無敵か!って感じ
だのに、一番強いんじゃないの?と思われたのは、森の奥方ガラドリエルと茶のラダガスト。。。(笑)

ビルボも一生懸命頑張ってた うん
でもなー最後のシーンがねー。。。
どうしても純粋に良い人と思えない印象を受けてしまった
まぁ、でも、それがないと指輪物語に繋がらないしねぇ。。。

◎観た日:2014年12月15日

画像:ホビット決戦のゆくえイメージ