css - 创建带有两个切 Angular 的边框

Question

我想为我的网站创建一个带有两个切 Angular 的边框。对于不同的 div 大小，我需要这个边框。

大约一个小时后，我让它以 200 像素的固定大小工作。但我不知道如何获得这种灵 active 。

这是一个 Demo

HTML

<div id="outer"><span>Some Text</span></div>

CSS

body {background: #000;}

#outer {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    background: #0ff;
}

#outer:before {
    content: "";
    height: 200px;
    left: -15px;
    position: absolute;  
    border-top: 15px solid transparent;
    border-right: 15px solid #fff;
}

#outer:after {
    content: "";
    width: 200px;
    height: 200px;
    top: -15px;
    right: -215px;
    position: absolute;
    border-left: 15px solid #fff;
    border-bottom: 15px solid transparent;
}


#outer span {
    width: 200px;
    height: 200px;
    position: absolute;
    padding: 50px;
}

#outer span:before {
    display: block;
    content: "";
    width: 200px;
    top: -15px;
    left: 0;
    position: absolute;
    border-bottom: 15px solid #fff;
    border-left: 15px solid transparent;
}

#outer span:after {
    display: block;
    content: "";
    width: 200px;
    height: 200px;
    top: 200px;
    left: -15px;
    position: absolute;
    border-top: 15px solid #fff;
    border-right: 15px solid transparent;
}

有人知道更好的解决方案吗？谢谢

Answer 1

您几乎拥有它。我调整了 fiddle 以使用百分比值作为尺寸和位置。不过边框仍然有 15 像素宽:

演示:http://jsfiddle.net/b48AK/show
来源:http://jsfiddle.net/b48AK

body {background: #8aa; padding:0px; margin:0px}
#outer {
  background: #bfb;
  position:relative;
  margin:15px;
} 

#outer:before { 
  content: ""; 
  height: 100%;
  left: -15px;
  position: absolute;  
  border-top: 15px solid transparent;
  border-right: 15px solid #fff;
} 

#outer:after { 
  content: ""; 
  width: 100%;
  height: 100%;
  top: -15px;
  left: 100%;
  position: absolute; 
  border-left: 15px solid #fff;
  border-bottom: 15px solid transparent;
} 

#outer span:before {
  display: block;
  content: "";
  width: 100%;
  top: -15px;
  left: 0;
  position: absolute;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}

#outer span:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 100%;
  left: -15px;
  position: absolute;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
}