リボンを作って画像に重ねる
三角を作って不要なところを消して四角と組み合わせてリボンを作る
先端部も透明になるので画像と重ねて表示できる。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="test01"></div> <style> .test01{ width: 0; height: 0; border-width: 20px; border-style: solid; border-color: #000 transparent #000 #000; } </style> |
border-color:「上」「右」「下」「左」で指定する。
実行すると↓
これを↓これと組み合わせればできる
こんな感じにできます。
↑訂正：組み合わせはズレの原因になることが判明：chromeとFireFoxで見え方が違うのでこの方法ではズレます。修正は後日UPします
