CSS：带有双边框的自定义形状div

Question

我对你们所有人都有挑战。我试图在不使用任何

的情况下制作以下形状

对我来说，困难（不可能？）是双边界。当然，我可以在切口上放置一些其他形状，但边界线会被打乱。有人有任何想法吗？

Answer 1

我相信SVG是你应该去的方式。但是，为了看看是否可能，我决定使用纯HTML和CSS制作这个形状。

这是fiddle。

HTML

<div id="wrap">
    <div id="mainshape"></div>
    <div id="upperleftcut"></div>
    <div id="diamondcut"></div>
</div>

我们将在这里使用3个形状，它们将被放置在一个可以作为整体形状的包装内。这两个切点是他们自己的div。

CSS

#wrap {
    width: 206px;
    height: 150px;
    position: relative;
    overflow: hidden;
}

#upperleftcut, #mainshape, #diamondcut {
    position: absolute;
    background-color: white;
    border-style: double;
}

#upperleftcut {
    border-style: none double double none;
    width: 100px;
    height: 20px;
}

#diamondcut {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    width: 30px;
    height: 30px;
    left: 197px;
    top: 50px;
    border-style: double;
}

#mainshape {
    border-style: double;
    background-color: white;
    width: 200px;
    height: 144px;
}

您要查找的CSS属性为border-style: double;。每个div都绝对定位在包装内，并且已经旋转钻石以形成所需的三角形切口。

结论

这对SVG来说要容易得多，而且更加灵活。不同形状之间的边界也不能很好地排列。不要用CSS做这件事，但要知道你可以。

据我所知，你无法摆脱那些边界重叠。

Answer 2

我回答了类似的事情，使用盒子阴影绘制边框并在几天前剪掉背景。 在这里，我附近有一些贴图http://codepen.io/gc-nomade/pen/lqzcm

div {
  margin:3em;
  border:1px solid;
  box-shadow:inset 0 0 0 4px white,
    inset 0 0 0 5px black;
  min-height:10em;
  position:relative;
  background:pink;
}
div:before {
  content:'';
  display:inline-block;
  float:left;
  width:5%;
  height:2em;
  height:12vh;
  background:white;
  box-shadow: 
    -1px -1px white,
    2px 2px 0 2px white, 
    1px 4px 0 0 black,
    4px 5px 0 0 black,
    5px 4px 0 0 black,
    inset -1px -1px 0 0 black;
}
div:after {
  position:absolute;
  content:'';
  height:32px;
  width:32px;
  background:white;
  box-shadow:1px 1px 0 0 black,
    4px 4px 0 0 white,
    5px 5px 0 0 black;
  right:0;
  top:3em;
  margin-right:-18px;
  transform:rotate(135deg);
}