这是我的代码，我想在其中开发一个类似于附图的导航栏。对于阴影，我搜索并发现在包装父 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> 
最佳答案
您可能需要使用 svg 来实现此目的。由于 Clip-path 属性，边框将从视口(viewport)中剪切掉。
我想到了三种解决方案:
- 您可以使用 svg
- 绘制一个带有剪辑路径的矩形并 然后在左侧和右侧有两个伪元素，它们将被绘制为三 Angular 形(带有边框的透明)
- 改用图像(我建议使用 .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)。然后将其作为背景图像添加到容器中。
<!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>
关于html - 我的代码不起作用。如何在剪切的 div 上添加前后元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60799344/