3

このような角度のある形状の div を最適にマスクする方法を見つけようとしています。この場合の上部の div が背景画像になり、両方の div が 100% 幅になる場合:

下部に三角形があるマスク画像

円の形で画像をマスクする方法については多くのチュートリアルを見てきましたが、赤い領域のような div の境界をマスクする方法についてはありません。ビットマップでこれを行うよりも良い方法があるに違いないことはわかっていますが、途方に暮れています。

これを clip-path または SVG で行うのが最善でしょうか? 古いブラウザーについては、それほど心配していません。その結果、赤/青の div が平らな線で区切られていることがわかります。赤い領域全体が背景画像になるため、古い（古い）ブラウザがその角張った境界線を見逃すと、それで問題ありません。

4

2 に答える 2

6

transform(skewおよび) を使用して、サポートが低い をrotate使用せずにこの効果を達成できます。clip-path

.container {
  width: 500px;
  height: 300px;
  background: linear-gradient(lightblue, dodgerblue);
  position: relative;
  overflow:hidden;
}

.container:after{
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  left:-50%;
  top:-50%;
  background:#D0021B;
  transform-origin: 0 100%; 
  transform:skewY(15deg);
}

.container:before{
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  left:50%;
  top:-50%;
  background:#D0021B;
  transform-origin: 100% 0; 
  transform:skewY(-15deg);
}
<div class="container"></div>

背景画像についてはtop:50%、両方に適用する必要がありますpseudo-elements

.container {
  width: 500px;
  height: 300px;
  background: url("http://i.imgur.com/5NK0H1e.jpg");
  position: relative;
  overflow: hidden;
}
.container:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: -50%;
  top: 50%;
  background: linear-gradient(lightblue,dodgerblue);
  transform: skew(10deg) rotate(10deg);
}
.container:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  background:linear-gradient(lightblue,dodgerblue);
  transform: skew(-10deg) rotate(-10deg);
}
<div class="container"></div>

于 2016-04-07T14:05:53.220 に答える