実際には、 divの背景で繰り返す透明な背景のストライプ画像が1つありますが、その画像を三角形のタイプでトリミングしたいので、CSSでそれを行うにはどうすればよいですか
実際に私が持っているイメージ
そして、以下の画像の透明なストライプ画像のように私が達成しようとしている期待される結果なので、CSSでこの画像をトリミングする方法
実際には、 divの背景で繰り返す透明な背景のストライプ画像が1つありますが、その画像を三角形のタイプでトリミングしたいので、CSSでそれを行うにはどうすればよいですか
実際に私が持っているイメージ
そして、以下の画像の透明なストライプ画像のように私が達成しようとしている期待される結果なので、CSSでこの画像をトリミングする方法
ストリップの背景を複数回使用できる場合(ストリップが不一致にならないように管理する)、これがデモを行うために必要なことです
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
CSS
#d1 {background:#f00;
height: 80px;
width: 400px; position:relative}
#d4{background:rgba(0,0,0,.5);height:80px; width:340px; left:60px; position:absolute;}
#d2{position:absolute;font-size:0px;left:20px;width: 0px; border-top: 40px solid red;
border-right: 40px solid rgba(0,0,0,.5);-webkit-transform:rotate(270deg);}
#d3{position:absolute;font-size:0px;left:20px;top:40px;width: 0px;
border-top: 40px solid red;
border-right: 40px solid rgba(0,0,0,.5);}
編集:リンクを更新しました
This is my result:
Note: i did it with a rgba
background, but i'm pretty sure you can do it with border-image
too.
HTML:
<div id="bgWrapper">
<div id="retina"></div>
</div>
CSS:
#bgWrapper {
background:url(main-background-image.jpg) top left no-repeat;
height:6em;
position:relative;
}
#retina {
position:absolute;
top:0; left:8em; right:0; bottom:0;
background:rgba(255,255,255,0.4);
}
#retina:before {
content:" ";
position:absolute;
top:0; left:-6em; bottom:0;
width:3em;
border-left:3em solid transparent;
border-top:3em solid rgba(255,255,255,0.4); /* same as #retina background */
border-bottom:3em solid rgba(255,255,255,0.4); /* same as #retina background */
}
</p>