时间戳

首页 > 解决方案 > 我的代码不起作用。如何在剪辑的 div 上添加前后元素？

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

问题描述

这是我的代码，我想在其中开发一个类似于附加图像的导航栏。对于阴影，我搜索并发现在包装父 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>

在此处输入图像描述

标签： htmlcssshadowdropshadow

解决方案

您可能想为此使用 an 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 解决方案。它是可扩展的。您可以编辑参数并使用它。

希望这就是你要找的。

编辑：

您可以将 svg 保存为文件 (.svg)。然后将其作为 a 添加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>

推荐阅读