html - 如何从矩形切入div？

Question

我想用css从div切割矩形。

示例：https ://i.imgur.com/WnUDDhw.png

我希望切割区域透明，以获取主体背景颜色。（透明的）

怎么做？

标签： htmlcss

Answer 1

基本思想可以通过设置不透明度的边界来完成。

.bg {
width:400px;
height: 300px;
background-image: url('https://placekitten.com/400/300')
}

.weirdBox {
   box-sizing: border-box;
   border-style: solid;
   border-width: 30px 50px;
   border-color: rgba(0, 0, 0, .5);
   width: 200px;
   height: 200px;
   margin-left: 50px;
}

<div class="bg">
<div class="weirdBox"></div>
</div>