Flat sharp corner or beveled corners

问题:

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

Something like this:

  ____
 /    \
 |    |
 \____/

回答1:

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

回答2:

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

回答3:

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;

}

回答4:

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>