带倒矩形角的边框

Question

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

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

我刚刚创建了一个简单的 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;
}

Answer 2

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

希望对您有所帮助 :) 编码愉快。

Answer 3

示例 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：Gradient/Image 形状的背景

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

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>

带倒矩形角的边框

Border with inverted rectangular corners

html

css

border

css-shapes