Как получить зигзагообразную границу с фоновым цветом и другим контурным цветом? - PullRequest
Новая
       6

Как получить зигзагообразную границу с фоновым цветом и другим контурным цветом?

0 голосов
/ 02 мая 2018

У меня есть контейнер с текстом. Контейнер должен иметь цвет фона (rgba (242,156,51,0.15) и зигзагообразную границу другого цвета, например, оранжевого, например. Возможно ли это?

Посмотрите на изображение ниже, как я хочу

enter image description here

Это то, что у меня есть 

.container {
  height: 500px;
  position: relative;
  padding: 30px 8px 32px 8px;
  background: #dddccf;
}

.container:after {
  background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
  background-position: left-bottom;
  background-repeat: repeat-x;
  background-size: 32px 32px;
  content: " ";
  display: block;
  position: absolute;
  top: -7px;
  left: 0px;
  width: 100%;
  height: 32px;
  transform: rotate(180deg)
}
<div class="container">
  Lorem Ipsum
</div>

1 Ответ

0 голосов
/ 02 мая 2018

Простое решение - объединить SVG и несколько фонов. Идея состоит в том, чтобы создать верхнюю фигуру с использованием SVG и повторить ее: 

.container {
  width:400px;
  margin:50px;
  height:200px;
  background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 0/20px 20px repeat-x,
  linear-gradient(orange,orange)0 20px/100% 100% no-repeat;
}

body {
 background:linear-gradient(to right, pink,yellow);
}
<div class="container">

</div>

И если вы хотите это со всех сторон, вы можете попробовать это: 

.container {
  width:400px;
  margin:50px;
  height:200px;
  background:
  url("data:image/svg+xml;utf8,<svg style='transform:rotate(180deg)' xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path  stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 100%/20px 20px repeat-x,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")20px 0/20px 20px repeat-x,
  linear-gradient(orange,orange)0 20px/100% calc(100% - 40px) no-repeat;
  position:relative;
}
.container:after {
   content:'';
   position:absolute;
   top:20px;
   bottom:20px;
   width:20px;
   right:-20px;
   background:
  url("data:image/svg+xml;utf8,<svg style='transform:rotate(90deg)' xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path  stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 0/20px 20px repeat-y;
}
.container:before {
   content:'';
   position:absolute;
   top:20px;
   bottom:20px;
   width:20px;
   left:-20px;
   background:
  url("data:image/svg+xml;utf8,<svg style='transform:rotate(270deg)' xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path  stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 0/20px 20px repeat-y;
}

body {
 background:linear-gradient(to right, pink,yellow);
}
<div class="container">

</div>
...