html - 带倒矩形 Angular 的边框

Question

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

当前代码:http://jsfiddle.net/bqjr5wep/

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

Answer 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:形状的渐变/图像背景

您还可以将不同于页面背景的图像(或)渐变添加到形状的背景中，它看起来像下面的代码片段。它不能完全遵循形状的外边界。

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:形状的半透明背景

这是其中最棘手的一个，但仍然可以通过对代码段进行一些小的修改来实现。这个想法来自 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>