How would I create this box with angled corners using CSS?

Question

I'm trying to create a box with angled corners and a black border like the image below:

enter image description here

Is this something that can be done using CSS?

Edit: Why the down votes? If you guys want proof that I tried, here you go.

HTML

<article>
     <span class="top-corners"></span>
     (the content)
     <span class="bottom-corners"></span>
</article>

CSS

.top-corners:before, .top-corners:after, .bottom-corners:before, .bottom-corners:after {
  content:"";
  position:absolute
}
.top-corners:before { 
  border-top:5px solid #000;
  border-right:5px solid #000;
  left:0;
  top:0
}
.top-corners:after { 
  border-top:5px solid #000;
  border-left:5px solid #000;
  right:0;
  top:0
}
.bottom-corners:before {
  border-bottom:5px solid #000;
  border-right:5px solid #000;
  bottom:0;
  left:0
}
.bottom-corners:after {
  border-bottom:5px solid #000;
  border-left:5px solid #000;
  bottom:0;
  right:0
}

@panther I've tried inserting a `span` element in the beginning and end of the `div` and using `:before` and `:after` to create the angles using borders, but I failed. I've also tried using the jQuery corner plugin (http://jquery.malsup.com/corner/) but it wouldn't work, presumably because the box has a border. — J82, Jul 07 '14 at 09:55
@J82 Please see http://stackoverflow.com/questions/4012085/is-there-any-way-to-invert-a-rounded-corner-in-css — hitautodestruct, Jul 07 '14 at 14:55

score 0 · Answer 1 · answered Jul 07 '14 at 10:10

You can try doing like this

HTML

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.outer {
  position: relative;
   width: 500px;
}
.inner {
  height: 200px;
  border: 3px solid #000;
}
.outer:before,
.outer:after,
.inner:before,
.inner:after {
  position: absolute;
  background: #fff;
  content: " ";
  display: block;
  height: 30px;
  width: 30px;
   border-left: 3px solid #000;
}
.outer:before {
     left: -15px;
     top: -15px;
    transform: rotate(-135deg);  
}
.outer:after {
    right: -15px;
    top: -15px;
    transform: rotate(-45deg); 
}
.inner:before {
    left: -15px;
    bottom: -15px;
    transform: rotate(135deg); 
}
.inner:after {  
    right: -15px;
    bottom: -15px;
    transform: rotate(45deg);
}

How would I create this box with angled corners using CSS?

1 Answers1