CSS中的分割div

我只是想知道，是否有可能，比如说，从两边切一个div

例如，假设我有一个div“box”

我想从左边切一块，宽20px，高100px，让它透明，但一切都还是在切片之前

我研究了一下，我所能找到的就是如何创建透明的边界角

是否存在可以切片的div或允许div的特定区域透明的div

先谢谢你

编辑

---

这就是我想做的，我想让第二个div左边的~50px透明，这样它看起来就在第一个div后面。我知道有些人可能会建议我使用z-index，但它不起作用。

你可以使用

线性梯度

和

之后的
伪元素
来实现这一点

我使用
线性渐变
使div半透明，并在
伪元素
后放置一个
，以隐藏透明部分的一半


正文{
背景：url（'http://lorempixel.com/500/500');
背景尺寸：封面；
}
div{
宽度：300px；
高度：300px；
边框：2倍实心；
背景：线性梯度（透明50%，橙色50%）；
位置：相对位置；
}
部门：之后{
位置：绝对位置；
内容：“；
宽度：50%；
身高：50%；
z指数：-1；
背景：橙色；
左：50%；
}
您可以使用
线性渐变
和
之后的
伪元素
来实现这一点

我使用
线性渐变
使div半透明，并在
伪元素
后放置一个
，以隐藏透明部分的一半


正文{
背景：url（'http://lorempixel.com/500/500');
背景尺寸：封面；
}
div{
宽度：300px；
高度：300px；
边框：2倍实心；
背景：线性梯度（透明50%，橙色50%）；
位置：相对位置；
}
部门：之后{
位置：绝对位置；
内容：“；
宽度：50%；
身高：50%；
z指数：-1；
背景：橙色；
左：50%；
}
这似乎是
z-index
的完美用例，z-index是一个需要定位而非静态的属性，但在其他情况下工作正常，可以更改项目的层顺序。我不确定您遇到了什么问题（如果另一个不可见元素覆盖在它上面，则不可单击的东西总是可能的-最好的方法是右键单击并检查元素，以查看是否选择了正确的元素）

我添加了一个小片段，向您展示了z-index是如何工作的。我一直在增加z-index，这显然是一个坏主意，对它们进行排序会更好，但是对于本例来说，它做得很好

然而，我能给出的最好建议是尽量使用更多的正z指数。负z指数可能会淹没在诸如身体及其伪元素之类的东西下面，这使得我们很难弄清楚到底发生了什么。我还相信，当我们用正数说话时，对我们弱小的人脑来说，这更有意义


var divs=document.querySelectorAll（'div'）；
var指数=4；
对于（var i=0；i
div{
宽度：200px；
高度：200px；
背景：灰色；
z指数：-1；
位置：固定；
左：100px；
顶部：100px；
}
div+div{
z指数：0；
左：120px；
顶部：120px；
背景：红色；
}
div+div+div{
z指数：1；
左：140像素；
顶部：140px；
背景：蓝色；
}
div+div+div+div+div{
z指数：2；
左：160像素；
顶部：160px；
背景：黄色；
}
-1
0
1.
2
这似乎是
z-index
的完美用例，z-index是一个需要定位而非静态的属性，但在其他情况下工作正常，可以更改项目的层顺序。我不确定您遇到了什么问题（如果另一个不可见元素覆盖在它上面，则不可单击的东西总是可能的-最好的方法是右键单击并检查元素，以查看是否选择了正确的元素）

我添加了一个小片段，向您展示了z-index是如何工作的。我一直在增加z-index，这显然是一个坏主意，对它们进行排序会更好，但是对于本例来说，它做得很好

然而，我能给出的最好建议是尽量使用更多的正z指数。负z指数可能会淹没在诸如身体及其伪元素之类的东西下面，这使得我们很难弄清楚到底发生了什么。我还相信，当我们用正数说话时，对我们弱小的人脑来说，这更有意义


var divs=document.querySelectorAll（'div'）；
var指数=4；
对于（var i=0；i
div{
宽度：200px；
高度：200px；
背景：灰色；
z指数：-1；
位置：固定；
左：100px；
顶部：100px；
}
div+div{
z指数：0；
左：120px；
顶部：120px；
背景：红色；
}
div+div+div{
z指数：1；
左：140像素；
顶部：140px；
背景：蓝色；
}
div+div+div+div+div{
z指数：2；
左：160像素；
顶部：160px；
背景：黄色；
}
-1
0
1.
2
不，那没有意义
div
本身就是分隔符或“切片”。听起来不可能，但也许你应该添加一个你正在尝试做的事情的图像。正确的透明边框有什么问题？它是一个边框，并添加到div中，我希望已经存在的东西是透明的@我想我会创建一个图像，给我一分钟：）为什么在你的例子中像
z-index
这样的东西是不可能的？它看起来是z-index的完美用例。不，那没有意义<代码>分割
是分割器或“切片”b
#box {
    width:100px;
    height:100px;
    background:red;
}