Html 伪元素未显示为溢出隐藏CSS

我问这个问题可能会受到一些批评，所以我会马上说。以前关于Stackoverflow的答案不起作用

我试图得到一个六边形的图像，为此，我想要一个

div

作为图像的父对象

然后，我使用了一个CSS六边形生成器，将CSS添加到我的

div

元素中，并使用

overflow:hidden

问题：我能看到的六边形的唯一部分是主矩形（非伪元素），而不是两边的两个三角形（伪元素）。我尝试了各种方法，从改变位置、摆脱动画，到将

溢出：隐藏
添加到不同的部分

CSS:

HTML:



结果:

我希望你能帮助我，因为我已经坐在这里很久了。如果您需要澄清，请添加评论，我会在明天早上回复。
试试以下方法：

HTML:

<div class="img-hexagon hexagon1">
  <div class="hexagon-helper-1">
    <div class="hexagon-helper-2">
      
    </div>
  </div>
</div>

.image-container img {
    position: absolute;
    top: -10px;
    left: -300px;
}
.img-hexagon {
    overflow: hidden;
    visibility: hidden;
    transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-helper-1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
}
.hexagon-helper-2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(https://i.stack.imgur.com/cYBwF.png);
    visibility: visible;
    transform: rotate(-60deg);
}

.hexagon1 {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
}

请注意，它只适用于作为
css
中的
背景图像应用的图像，我在您的css上没有看到任何六边形，请提供一个最小的可复制示例，这不完全是我想要的，因为我宁愿将其作为单个div使用，但它可以工作！猜猜如果你不想要背景图像，那么使用伪元素的方法效果更好。非常感谢你！
<div class="img-hexagon hexagon1">
  <div class="hexagon-helper-1">
    <div class="hexagon-helper-2">
      
    </div>
  </div>
</div>

.image-container img {
    position: absolute;
    top: -10px;
    left: -300px;
}
.img-hexagon {
    overflow: hidden;
    visibility: hidden;
    transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-helper-1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
}
.hexagon-helper-2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(https://i.stack.imgur.com/cYBwF.png);
    visibility: visible;
    transform: rotate(-60deg);
}

.hexagon1 {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
}