如何使锯齿形边框具有背景颜色和不同的轮廓颜色？

Question

我有一个带有文本的容器。容器应具有背景颜色 (rgba(242,156,51,0.15) 和带有另一种颜色的锯齿形边框，例如橙色。这可能吗？

看下图我想要的样子

这就是我的

.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>

Answer 1

一个简单的解决方案是结合 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>

如何使锯齿形边框具有背景颜色和不同的轮廓颜色？

How to have a zigzag border with a backgroundcolor and a different contour color?

html

css

border