Html 倒直角边框

如何创建类似于此图像的非矩形边框

当前代码：

---

我刚刚创建了一个简单的SVG图像，并使用CSS边框图像来创建所需的效果

CSS:

---

希望有帮助：）愉快的编码。

示例1：非固体页面背景形状的透明背景

这是一种支持页面非固体背景（渐变或图像）、形状透明背景以及可伸缩性的方法。缺点可能是它需要不止一个元素

.shape{
位置：相对位置；
高度：200px；
宽度：500px；
}
.内部形状{
位置：绝对位置；
顶部：2个；
左：2px；
身高：100%；
宽度：100%；
边框：2倍纯白；
}
.形状：之后，
.形状：以前{
位置：绝对位置；
内容：''；
身高：100%；
宽度：100%；
边框：2倍纯白；
}
.形状：之后{
顶部：-4px；
左：10px；
边框宽度：2px2px0px 0px；
}
.形状：以前{
顶部：10px；
左：-4px；
边框宽度：0px 0px 2px 2px；
}
.形状内部：之前，
.内部形状：后{
位置：绝对位置；
内容：''；
高度：12px；
宽度：12px；
边框：2倍纯白；
}
.内部形状：之前{
顶部：-6px；
左-6px；
边框宽度：0px 2px 2px 0px；
}
.内部形状：后{
底部：-6px；
右图：-6px；
边框宽度：2px 0px 0px 2px；
}
/*只是为了演示*/
身体{
背景：线性梯度（90度，深红色，印度红，紫色）；
}

您的背景是纯色还是渐变色/图像？纯色还是图像。依赖于纯色是很容易实现的。图像背景可能很难理解，需要SVG。我觉得CSS标签比HTML5对这个问题更合适/更有用，但我在第一次编辑时似乎忽略了这一点。你介意我再编辑一次吗？顺便说一下，这段代码不包含svg。纯CSS。您可以根据所需的输出来调整边框大小。@约翰：很抱歉吹毛求疵，但我认为它只适用于纯色背景。是的，但如果您有图像背景，您仍然可以使用它，但使用不同的CSS技巧代码：）玩得开心。很高兴与大家分享一些想法或解决方案。这真是太棒了Harry，谢谢你的回复。您能否详细说明使用纯css而不是SVG边框图像进行此操作的好处？能够选择您想要的颜色和大小，而不必创建新的SVG图像吗？不知道该去哪一个。@Snowball:总是很乐意帮助配偶。在这种情况下，我不认为SVG有什么大的优势，但我也不认为有什么大的缺点。是的，有一个额外的元素，但这几乎可以忽略不计。使用的CSS方法应该在IE8中起作用，而我认为SVG不起作用。@Snowball:请将任何一个答案标记为已接受。这就是将问题标记为已解决的方法：）

div {
    background:#1c1c1c;
    width:400px;
    height:200px;
    position:relative;
}

div:before, div:after {
    content:'';
    display:block;
    left:10px;
    right:10px;
    top:10px;
    bottom:10px;
    border:2px solid #FFF;
    position:absolute;
}

div:after {
    left:14px;
    top:14px;
    right:14px;
    bottom:14px;
}

div {
  width:80%;
  height: 200px;
  position: relative;
  margin:50px auto;
  background-color: #1c1c1c;
}

div:before, div:after {
  content:'';
  display: block;
  position: absolute;
  left: 10px;
  top:10px;
  right: 10px;
  bottom: 10px;
}

div:before {
  border-style: solid;
  border-width: 16px;
  -moz-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
  -webkit-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
  -o-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
  border-image: url('http://imgh.us/border_1.svg') 16 repeat;
}

div:after {
  border:2px solid #FFF;
  left:14px;
  top:14px;
  right:14px;
  bottom:14px;
}

.wrap{
    width: 400px;
    height: auto;
    position: relative;
    background: #000;
    overflow: hidden;
    padding: 20px;
}

.border-1{
    width: 400px;
    height: 200px;
    position: relative;
    border: 1px solid #fff;
}

.border-2{
    width: 391px;
    height: auto;
    position: absolute;
    border: 1px solid #fff;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    margin: auto;
    z-index: 3;
}

.top-1{
    position: absolute;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #000;
    z-index: 2;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

.bottom-1{
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: #000;
    z-index: 2;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}