Esquina plana o esquinas biseladas

Question

¿Hay alguna manera de crear una esquina plana con CSS y HTML?

Algo como esto:

____ 
/ \ 
| | 
\____/ 

Answer 1

Aquí está mi solución, usando las formas de CSS de Chris Coyier.

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

4 divs adicionales se insertan a través de JavaScript (bueno, en realidad jQuery) para cada uno de los contenedores que se desea en forma de esta manera. Estos divs están posicionados absolutamente en las esquinas de su padre, y están decoradas en consecuencia como se describe en el enlace publicado por Sven Bieder

Answer 2

Puede componer esta usando con posición absoluta :before y :after elementos usando la técnica de CSS triangles.

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

} 

Answer 3

vistazo aquí. Allí encontrará todo lo que necesita:

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

Editar En caso de que el enlace se perdieron:

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