CODEWITHSUNDEEP
cssborder
tryzor
tryzor

Reputation: 800

Create border with two cut off corners

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

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.

Here's a 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;
}

Anyone knows a better solution? Thanks

Upvotes: 0

Views: 5277

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78530

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:

Demo: http://jsfiddle.net/b48AK/show
Source: 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;
}

​

Upvotes: 3

Related Questions