带有倒矩形角的边框答案

【问题标题】：Border with inverted rectangular corners带有倒矩形角的边框
【发布时间】：2015-07-29 12:51:28
【问题描述】：

如何创建像这张图片中的非矩形边框？

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;
}

【问题讨论】：

你的背景是纯色还是渐变/图像？
纯色或图像。视情况而定
纯色很容易实现。图片背景可能很难，需要 SVG。
我觉得 CSS 标签对于这个问题也比 HTML5 更贴切/有用，但我第一次编辑时似乎错过了这一点。你介意我再编辑一次吗？

标签： html css border css-shapes

【解决方案1】：

示例 1：具有非纯色页面背景的形状的透明背景

这是一种支持页面非纯色背景（渐变或图像）、形状透明背景且可扩展的方法。缺点可能是它需要多个元素。

.shape {
  position: relative;
  height: 200px;
  width: 500px;
}
.shape-inner {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 100%;
  width: 100%;
  border: 2px solid white;
}
.shape:after,
.shape:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  border: 2px solid white;
}
.shape:after {
  top: -4px;
  left: 10px;
  border-width: 2px 2px 0px 0px;
}
.shape:before {
  top: 10px;
  left: -4px;
  border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
  position: absolute;
  content: '';
  height: 12px;
  width: 12px;
  border: 2px solid white;
}
.shape-inner:before {
  top: -6px;
  left: -6px;
  border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
  bottom: -6px;
  right: -6px;
  border-width: 2px 0px 0px 2px;
}
/* Just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="shape">
  <div class="shape-inner"></div>
</div>

示例 2：形状的纯色（非透明）背景

如果形状需要与页面背景相比具有不同的背景，并且形状的背景是纯色，则可以使用相同的方法并稍作修改。示例如下：

.shape {
  position: relative;
  height: 200px;
  width: 500px;
}
.shape-inner {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 100%;
  width: 100%;
  background: steelblue;
  border: 2px solid white;
}
.shape:after,
.shape:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: steelblue;  
  border: 2px solid white;
  z-index: -1;
}
.shape:after {
  top: -4px;
  left: 10px;
  border-width: 2px 2px 0px 0px;
}
.shape:before {
  top: 10px;
  left: -4px;
  border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
  position: absolute;
  content: '';
  height: 12px;
  width: 12px;
  border: 2px solid white;
}
.shape-inner:before {
  top: -6px;
  left: -6px;
  border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
  bottom: -6px;
  right: -6px;
  border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="shape">
  <div class="shape-inner"></div>
</div>

示例 3：形状的渐变/图像背景

您还可以将与页面背景不同的图像（或）渐变添加到形状的背景，它看起来像下面的 sn-p。它不能完全跟随形状的外边界。

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}
.shape {
  position: relative;
  height: 200px;
  width: 500px;
}
.shape-inner {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 100%;
  width: 100%;
  border: 2px solid white;
  background: url(http://lorempixel.com/600/600);
}
.shape:after {
  position: absolute;
  content: '';
  top: -4px;
  left: 10px;
  height: 100%;
  width: 100%;
  border: 2px solid white;
  border-width: 2px 2px 0px 0px;
}
.shape:before {
  position: absolute;
  content: '';
  top: 10px;
  left: -4px;
  height: 100%;
  width: 100%;
  border: 2px solid white;
  border-width: 0px 0px 2px 2px;
}
.shape-inner:before {
  position: absolute;
  content: '';
  height: 12px;
  width: 12px;
  top: -6px;
  left: -6px;
  border: 2px solid white;
  border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
  position: absolute;
  content: '';
  height: 12px;
  width: 12px;
  bottom: -6px;
  right: -6px;
  border: 2px solid white;
  border-width: 2px 0px 0px 2px;
}

<div class="shape">
  <div class="shape-inner"></div>
</div>

示例 4：形状的半透明背景

这是最棘手的，但仍然可以通过对 sn-p 进行一些小的修改来实现。这个想法来自this thread。

.shape {
  position: relative;
  height: 200px;
  width: 500px;
}
.shape-inner {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 100%;
  width: 100%;
  background: rgba(80, 80, 80, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape:after,
.shape:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  opacity: 0.75;
  border: 2px solid white;
  z-index: -1;
}
.shape:after {
  top: -4px;
  left: 10px;
  border-width: 2px 2px 0px 0px;
  background: linear-gradient(180deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(270deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape:before {
  top: 10px;
  left: -4px;
  border-width: 0px 0px 2px 2px;
  background: linear-gradient(0deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(90deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape-inner:before,
.shape-inner:after {
  position: absolute;
  content: '';
  height: 12px;
  width: 12px;
  border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape-inner:before {
  top: -6px;
  left: -6px;
  border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
  bottom: -6px;
  right: -6px;
  border-width: 2px 0px 0px 2px;
}
/* Just for demo */

body {
  background: url(http://lorempixel.com/400/200/sports/Dummy-Text/);
}

<div class="shape">
  <div class="shape-inner"></div>
</div>

【讨论】：

这真是太棒了哈利，感谢您的回复。您能否详细说明使用纯 css 而不是 SVG 边框图像这样做的好处是什么？无需创建新的 SVG 图像即可选择所需的颜色和尺寸？不知道该去哪一个。
@Snowball：总是乐于帮助队友。在这种情况下，我认为与 SVG 相比没有什么很大的优势，但我也想不出任何主要的缺点。是的，有一个额外的元素，但这可以忽略不计。使用的 CSS 方法应该可以在 IE8 中使用，而我认为 SVG 不行。
@Snowball：请将任何一个答案标记为已接受。这是 SO 将问题标记为已解决的方式 :)

【解决方案2】：

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

http://jsfiddle.net/bqjr5wep/1/

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;
}

【讨论】：

【解决方案3】：

Try This

CSS：

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

希望它有所帮助 :) 快乐编码。

【讨论】：

顺便说一句，这段代码不包含 svg。纯 CSS。您可以根据所需的输出调整边框大小。
@John：很抱歉吹毛求疵，但我认为只适用于纯色背景。
是的，但是如果您有图像背景，您仍然可以使用它，但使用不同的 CSS 技巧代码 :) 玩得开心。很高兴分享一些想法或解决方案。