Question

我想要得到的效果是我的形状在另一个形状前面，并且那个形状是背景可见。理想情况下只是轮廓，但切出整个形状将是正常的，因为我可以在里面绘制另一种形状。

这是一个显示我的意思的片段

.box{
  width: 500px;
  height: 500px;
  background-color: red;
  position: relative;
}

.inner-box{
  width: 100px;
  height: 100px;
  border: 15px solid #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  
}

body{
  background-image: url("https://unsplash.com/photos/6-jTZysYY_U/download");
}

<div class="box"><div class="inner-box"></div></div>

除了黑色轮廓，我希望能够看到轮廓所在的背景，或者整个方块被切掉。

Answer 1

以下是 SVG 方法<mask>

＆＃13;

html {
  height: 100%;
}

body{
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/6a/22/e3/6a22e387a2c72af177b2fa22ec71cbaa.jpg");
  margin: 0;
  padding: 0;
  height: 100%;
  background-size: cover;
}

＆＃13;

<svg width="50%" height="70%">
   <mask x='0' y='0' id="cut">
     <rect y='0' x='0' width="100%" height='100%' fill="white"/>
     <rect y='40%' x='40%' width="15%" height='15%' stroke-width="3%" stroke="black" fill="transparent"/>
   </mask>
   <rect y='0' x='0' width="100%" height='100%' fill="#fff" mask="url(#cut)"/>
</svg>

＆＃13;

html {
  height: 100%;
}

body{
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/6a/22/e3/6a22e387a2c72af177b2fa22ec71cbaa.jpg");
  margin: 0;
  padding: 0;
  height: 100%;
  background-size: cover;
}

＆＃13;

<svg width="50%" height="70%">
   <mask x='0' y='0' id="cut">
     <rect y='0' x='0' width="100%" height='100%' fill="white"/>
     <rect y='35%' x='35%' width="25%" height='25%'/>
   </mask>
   <rect y='0' x='0' width="100%" height='100%' fill="#fff" mask="url(#cut)"/>
</svg>

＆＃13;

使用CSS剪切形状

1 个答案: