[我想知道如何在css中为单个背景图像的多个div（创建为矩形）在css中实现剪切路径效果/敲除效果（类似于photoshop中的剪切路径？）是否有CSS工具？我在代码中包含了一个示例图像。例如：https://imgur.com/a/dcADVcaCodepen：https://codepen.io/lucasenz/pen/MWYaZBJ
HTML：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO.</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<h1>HELLO</h1>
</div>
<div class="content">
<div class="row ">
<div class="col rectangle">BOX ONE</div>
<div class="col rectangle">BOX TWO</div>
</div>
<div class="row ">
<div class="col rectangle">BOX THREE</div>
<div class="col rectangle">4 of 6</div>
</div>
<div class="row ">
<div class="col rectangle">5 of 6</div>
<div class="col rectangle">6 of 6</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1568039955984-85273dd1cd2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80"/>
</body>
</html>
CSS：
*{
font-family: lato;
}
body{
height: 100%;
}
h1{
font-weight:900;
letter-spacing: 0.2em;
text-align: center;
font-size: 4vh;
margin-top: 4vh;
}
.content{
width: 50%;
height: 80vh;
align-items: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.rectangle{
height: 18vh;
width: 15vw;
margin: 1.5vh 0.7vw;
text-align: center;
background-color: tomato;
display: flex;
align-items: center;
justify-content: center;
}
我会寻求一个简单的解决方案。创建一个以图像为背景的容器，并通过在容器内创建带有白色边框的透明div来绘制分隔线。
.cont{
display: flex;
flex-wrap: wrap;
width: 560px;
height: 300px;
background-image: url("https://cnet4.cbsistatic.com/img/pI-Oq4fGqthDVMMMuyL2ZMnaC5I=/2019/11/01/1e902743-2ee4-4c22-9b66-0b396596b13e/20190701-154228.jpg");
background-size: cover;
}
.box{
flex-basis: 28%;
flex-grow: 1;
flex-shrink: 1;
height: 46%;
border: 10px solid white;
}<div class="cont">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>