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

Question

这是我的代码，我想在其中开发一个类似于附图的导航栏。对于我搜索的阴影，发现在包裹父级 div 时，我们可以使用 dropshadow() 给出阴影，但现在我想为此提供 2px 实心边框，我尝试了 ::之前，但这没有用。我无法理解原因。

.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

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

.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);
}

<div class="forshadow">
                  
      <div style="border: 2px solid red" class="mybar"></div>
                  
</div>

解决方案和你想象的一样吗？我用红色作为边框。当然，你可以改变它。

Answer 2

您可能需要为此使用 svg。由于剪辑路径属性，边框将从视口中切出。

我想到了三种解决方案：

你可以使用 svg
绘制一个带有剪辑路径的矩形，然后然后左右各有两个伪元素，绘制成三角形（透明带边框）
改用图片（我建议使用 .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 解决方案。它是可扩展的。您可以只编辑参数并使用它。

希望这就是您要找的。

编辑：

您可以将 svg 保存为文件 (.svg)。然后将其作为 background-image 添加到容器中。

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
   .navbar {
     filter: drop-shadow(0 0 0.45rem #ac04cb);
     width: 800px; /* the container width - adjust */
     height: 50px; /* the container height - adjust */
        color: white;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Ym94PSIwIDAgMTAwIDUwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KCTxwb2x5Z29uIGNsYXNzPSJteWJhciIgcG9pbnRzPSIwLDAgMTAwLDAgOTUsNTAgNSw1MCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIi8+Cjwvc3ZnPg==");
     /* alternative, non-base-64: background-image: url("your-file.svg");*/
     background-size: 100% 100%;
   }

      /* this will style the <polygon> element inside the svg */
   .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 */
   }
  </style>
 </head>
 <body>
  <nav class="navbar">
      <div>The svg is just a background image - we can write on it.</div>
    </nav>
 </body>
</html>

我使用和解码的svg文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 50" width="100" height="50" preserveAspectRatio="none">
    <polygon class="mybar" points="0,0 100,0 95,50 5,50" vector-effect="non-scaling-stroke"/>
</svg>

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

My code is not working. How can I add after and before elements on a clipped div?

html

css

shadow

dropshadow