0

実際には、 divの背景で繰り返す透明な背景のストライプ画像が1つありますが、その画像を三角形のタイプでトリミングしたいので、CSSでそれを行うにはどうすればよいですか

実際に私が持っているイメージ ここに画像の説明を入力

そして、以下の画像の透明なストライプ画像のように私が達成しようとしている期待される結果なので、CSSでこの画像をトリミングする方法 ここに画像の説明を入力

4

2 に答える 2

0

ここに画像の説明を入力してください

ストリップの背景を複数回使用できる場合(ストリップが不一致にならないように管理する)、これがデモを行うために必要なことです

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

編集:リンクを更新しました

于 2012-10-09T12:59:44.947 に答える
0

This is my result:

just a demo

Demo

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>

于 2012-10-09T13:02:15.057 に答える