Flat sharp corner or beveled corners

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

Something like this:

  ____
 /    \
 |    |
 \____/

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

Here is my solution, using the CSS shapes from Chris Coyier.

http://jsfiddle.net/dDejan/XSs9L/

4 extra divs are inserted via JavaScript (well, jQuery actually) for each of your containers that you want shaped this way. These divs are positioned absolutely in the corners of it's parent, and they are styled accordingly as described in the link posted by Sven Bieder

You can compose this using absolutely-positioned :before and :after elements using the CSS triangles technique.

<div class="box"></div>

css:

.box {
   background-color:#2020ff;
   height:50px;
   width:50px;
   position:relative   
}

.box:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    border-right:10px solid #ffffff;  
    position:absolute;
    top:-9px;
    right:0px;

}

box {
  background-color: transparent;
  position: fixed;
  width: 300px;
  height: 300px;
}
svg {
  width: 300px;
  height: 300px;
}
polygon {
  visibility: visible;
  background: black;
  stroke: white;
}

<box>
  <svg>
    <polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" />
  </svg>
</box>

.rotate {
    margin: 100px;
    background-color: olivedrab;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="rotate"></div>
</body>

</html>

来源：https://stackoverflow.com/questions/10883963/flat-sharp-corner-or-beveled-corners

标签

html

css

css-shapes