CSS中带有背景的不规则形状的容器

嗨

我遇到了一个相当具有挑战性的局面。我有点了解如何用CSS制作各种不同的形状，但是如果容器中有一些东西，上面有这样的背景，那该怎么办呢：

（请在黑色背景上查看，以便更好地查看）

您可能会注意到，它是一个列表，单选按钮位于一个不规则形状内，该形状以半透明图像为背景。如何仅使用CSS实现此效果？我认为伪元素根本不起作用，因为透明的背景必须在整个容器和线条上保持一致。如果我重叠伪元素，它看起来就像一团乱麻。此外，左侧边框具有完全透明的背景。有什么想法吗

多谢各位

ul{
背景：rgba（0,0,0,0）url（“back.png”）无重复滚动0；
边框：1px纯色灰色；
利润率：20px；
填充物：5px；
宽度：100px；
}
li{列表样式：无；}
前{
边框：1px纯色灰色；
内容：“；
显示：块；
高度：124px；
利润率：0-17px；
位置：绝对位置；
顶部：20px；
宽度：5px；
}
ul:之后{
边框：1px纯色灰色；
内容：“；
高度：5px；
左：28px；
位置：绝对位置；
顶部：150px；
宽度：110px；
}

选择1
选择2
选择3
选择4
备选案文5
备选案文6

您可以使用剪辑路径执行此操作。 CSS位于第302行之后。 请确保剪裁元素的位置是绝对的，并记住浏览器支持不是最好的。 这些是沙箱游戏场，可以生成路径，非常简单

  -webkit-clip-path: polygon(1% 3%, 3% 9%, 18% 21%, 54% 20%, 
  83% 63%, 66% 76%, 15% 83%, 25% 45%);

链接到Codepen，将鼠标悬停在饮料上：-）

---

您可以使用剪辑路径执行此操作。 CSS位于第302行之后。 请确保剪裁元素的位置是绝对的，并记住浏览器支持不是最好的。 这些是沙箱游戏场，可以生成路径，非常简单

  -webkit-clip-path: polygon(1% 3%, 3% 9%, 18% 21%, 54% 20%, 
  83% 63%, 66% 76%, 15% 83%, 25% 45%);

链接到Codepen，将鼠标悬停在饮料上：-）

Svg解决方案 这个形状非常特殊，我会创建一个png文件用作背景。
现在，如果出于某种原因您不能使用png背景，您可以使用svg：

正文{
保证金：0；
}
.集装箱{
背景图像：url（“http://www.lorempixel.com/500/500/");
位置：相对位置；
高度：300px；
宽度：200px；
/*颜色：白色；看起来很糟糕*/
}
.容器svg{
位置：相对位置；
身高：100%；
宽度：100%；
}
.货柜h3{
位置：绝对位置；
左：27%；
最高：4%；
}
.货柜标签{
位置：绝对位置；
左：32%；
最高：30%；
}
.容器标签：第n个类型（2）{
最高：40%；
}
.容器标签：第n种类型（3）{
最高：50%；
}
.容器标签：第n个类型（4）{
最高：60%；
}
.容器标签：第n种类型（5）{
最高：70%；
}

一些内容
选择1
选择2
选择3
选择4
备选案文5

Svg解决方案 这个形状非常特殊，我会创建一个png文件用作背景。
现在，如果出于某种原因您不能使用png背景，您可以使用svg：

正文{
保证金：0；
}
.集装箱{
背景图像：url（“http://www.lorempixel.com/500/500/");
位置：相对位置；
高度：300px；
宽度：200px；
/*颜色：白色；看起来很糟糕*/
}
.容器svg{
位置：相对位置；
身高：100%；
宽度：100%；
}
.货柜h3{
位置：绝对位置；
左：27%；
最高：4%；
}
.货柜标签{
位置：绝对位置；
左：32%；
最高：30%；
}
.容器标签：第n个类型（2）{
最高：40%；
}
.容器标签：第n种类型（3）{
最高：50%；
}
.容器标签：第n个类型（4）{
最高：60%；
}
.容器标签：第n种类型（5）{
最高：70%；
}

一些内容
选择1
选择2
选择3
选择4
备选案文5

您还可以使用多个背景图像，使用设计框的切片（经典方式）或渐变，或两者的混合

渐变概念示例：

h3，ul，li{
保证金：0；
填充：0；
显示：块；
}
h3{
文本缩进：-20px；
}
div{
宽度：100px；
保证金：1em 1em 3em；
填充：5px 10px 5px 60px；
背景：
线性渐变（向右，透明23px，
灰色23px，灰色29px，透明29px，透明34px，黑色34px）0底部无重复，
线性渐变（向右，灰色1px，灰色6px，透明6px，透明10px，黑色10px）0 0无重复，
线性渐变（向右，灰色1px，透明1px，透明5px，灰色5px，灰色6px，透明6px，透明11px，黑色11px，黑色12px，灰色12px）0 0无重复，
线性梯度（60度，透明20px，灰色20px，灰色21px，透明21px，透明25px，灰色25px，灰色26px，透明26px，透明30px，黑色30px，黑色31px，灰色31px）0 20px无重复，
线性渐变（向右，透明23px，
灰色23px，灰色24px，透明24px，透明28px，灰色28px，灰色29px，透明29px，透明34px，黑色34px，黑色34px，灰色35px）0 61px无重复；
背景尺寸：100%1px，100%1px，100%20px，100%41px，100%100%；
右边框：1px实心；
位置：相对位置；
浮动：左；
}
部门：之后{
内容：''；
位置：绝对位置；
最高：100%；
右：0；
左：22px；
边缘顶部：5px；
高度：16px；
边框顶部：实心1px；
背景：
线性渐变（向右，黑色1px，灰色1px）0 0 0无重复，
线性渐变（-60度，透明3px，黑色3px，黑色5px，灰色5px）右上角无重复，
线性梯度（-60度，透明24px，黑色24px，黑色25px，灰色25px）右侧5px无重复，
线性渐变（60度，透明3px，黑色3px，黑色4px，灰色4px）左9px无重复，
线性梯度（-60度，透明3px，黑色3px，黑色4px，灰色4px）5px 9px无重复，
线性渐变（黑色，黑色）0 5px无重复，
线性梯度