Flat sharp corner or beveled corners

Question

Is there any way to create a sharp flat corner with CSS and HTML?

Something like this:

  ____
 /    \
 |    |
 \____/

Answer 1

Look here. There you find all you need:

http://css-tricks.com/examples/ShapesOfCSS/

Edit In case the link goes lost:

CSS

#octagon { 
  width: 100px; 
  height: 100px; 
  background: red;  
  position: relative; 
} 

#octagon:before { 
  content: ""; 
  position: absolute;  
  top: 0; left: 0; 
  border-bottom: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; height: 0; 
} 

#octagon:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; 
  height: 0; 
} 

Answer 2

Here is a complete solution for the whole box. It scales based on the content size like you would expect from a regular div. And you can easily resize it with the height and width property without having to tinker with anything else. It is a modified version of this codepen.

div {
  padding: 5px;
  margin: 40px auto;
  width: 230px;
  background: rgba(47,51,54,1); /* fallback */
  background:
        -moz-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  background:
        -o-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  background:
        -webkit-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  xbackground:
        linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
}

div {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

p {
  border-left: none;
  border-right: none;
  color: #ccc;
  margin: 0;
  min-height: 40px;
  padding: 10px;
  position: relative;
}

<div>
  <p>Here is some content.</p>
</div>

https://codepen.io/c0n5/pen/vYyRPVZ