0

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

大约一个小时后，我让它以 200 像素的固定大小工作。但我不知道如何才能变得如此灵活。

这是一个 演示

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

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

4

1 回答 1

3

你自己也差不多。我调整了小提琴以使用尺寸和位置的百分比值。边框仍然是 15px 宽：

演示： 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;
}

​</p>

于 2012-11-24T20:57:10.893 回答