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 种形状，它们将放置在一个包装内，作为整体形状。这两个切 Angular 是它们自己的 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 都已绝对定位在包装内，菱形已旋转以形成所需的三 Angular 形切割。

结论

如果使用 SVG，这会容易得多，而且也更加灵活。不同形状之间的边界也没有很好地对齐。不要使用 CSS 执行此操作，但要知道您可以。

据我所知，您无法摆脱这些边界重叠。