リボンを作って画像に重ねる

三角を作って不要なところを消して四角と組み合わせてリボンを作る

先端部も透明になるので画像と重ねて表示できる。

<div class="test01"></div>
 <style>
.test01{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: #000 transparent #000 #000;
}
</style>

1

2

3

4

5

6

7

8

9

10

<style>

.test01{

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: #000 transparent #000 #000;

}

</style>

border-color:「上」「右」「下」「左」で指定する。

実行すると↓

これを↓これと組み合わせればできる

こんな感じにできます。

↑訂正：組み合わせはズレの原因になることが判明：chromeとFireFoxで見え方が違うのでこの方法ではズレます。修正は後日UPします

カテゴリー: HTML

WordPress

2022年1月15日

HTML

2022年2月27日

リボンを作って画像に重ねる

wp 固定ページのリスト表示をアレンジ（class、span等追加)

上下中央に配置するCSS