我的代码不起作用。如何在裁剪的div上元素的前后添加？

Question

这是我的代码，我想在其中开发类似于附件图像的导航栏。对于阴影，我进行了搜索，发现在包装父div时，我们可以使用dropshadow（）进行阴影处理，但是现在我想为此提供牢固的2px边框，我尝试了:: before，但是没有用。我无法理解原因。

.mybar{
   
    background-color: black;
    width: 90%;
    height: 40px;
    clip-path: polygon(0 0,100% 0%,95% 100%,5% 100%);
    padding: 0px;
  
    
}
.forshadow{filter: drop-shadow(0 0 0.45rem #ac04cb);}

.mybar::before{
    content: " ";
    background-color:#d673ff ;
    width:93%;
    height: 43px;
}

<div class="forshadow">
                  
      <div class="mybar">
                            
      </div>
                  
</div>

Answer 1

您可能要为此使用svg。由于具有clip-path属性，因此将边框从视口中切除。

我想到三种解决方案：

1. 您可以使用svg
2. [绘制带有剪切路径的矩形，然后然后在左侧和右侧有两个伪元素，它们将被绘制为三角形（带有边框）[]
3. 改用图像（我建议使用.gif格式，因为它都是相同的颜色）

.forshadow {
  filter: drop-shadow(0 0 0.45rem #ac04cb);
  width: 800px; /* the container width - adjust */
  height: 50px; /* the container height - adjust */
}

.mybar {
  width: 100%; /* 100% of the container - will always adapt to the container */
  height: 100%; /* 100% of the container - will always adapt to the container */
  fill: #000000; /* background */
  stroke: hotpink; /* border color */
  stroke-width: 2; /* border size */
}
<div class="forshadow">
  <svg class="mybar" viewbox="0 0 100 100" preserveAspectRatio="none">
    <polygon points="0,0 100,0 95,50 5,50" vector-effect="non-scaling-stroke"/>
  </svg>
</div>

我建议使用svg解决方案。它被制成可伸缩的。您可以只编辑参数并对其进行操作。

希望这就是您想要的。

Answer 2

您可以将border: 2px solid red添加到需要边框的div。