Мой код не работает. Как я могу добавить после и перед элементами в обрезанном div? - PullRequest
Новая
       101

Мой код не работает. Как я могу добавить после и перед элементами в обрезанном div?

2 голосов
/ 22 марта 2020

Это мой код, в котором я хочу разработать панель навигации, похожую на прикрепленное изображение. Для тени я искал и обнаружил, что при обёртывании родительского div мы можем дать тень, используя dropshadow () , но теперь я хочу дать для этого границу solid 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>

enter image description here

Ответы [ 2 ]

2 голосов
/ 22 марта 2020

Вы можете использовать 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). А затем добавьте его как 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>
1 голос
/ 22 марта 2020

Вы можете добавить 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>

Решение выглядит так, как вы себе представляли? Я использовал красный цвет для границы. Вы можете изменить это, конечно.

...