创建带有两个切角的边框 [英] Create border with two cut off corners

问题描述

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

I want to create a border with two cut off corners for my website. I need this border for different div sizes.

一个小时后，我得到它的固定大小为200像素。但我不知道如何获得这个灵活性。

After an hour or so I got it to work with a fixed size of 200px. But I don't know how I can get this flexible.

这里是一个
演示

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

任何人都知道更好的解决方案？感谢

Anyone knows a better solution? Thanks

推荐答案

你几乎自己。我修改了小提琴以使用尺寸和位置的百分比值。边框宽度仍为15像素：

You pretty much have it yourself. I adapted the fiddle to use percent values for the dimensions and positions. It's still 15px wide for the border though:

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

这篇关于创建带有两个切角的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！