Angolo piatto o angoli smussati

Question

C'è un modo per creare un angolo piatto nitido con CSS e HTML?

Qualcosa di simile a questo:

____ 
/ \ 
| | 
\____/ 

Answer 1

Ecco la mia soluzione, utilizzando le forme CSS da Chris Coyier.

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

4 div aggiuntivi vengono inseriti tramite JavaScript (beh, in realtà jQuery) per ciascuno dei vostri contenitori che si desidera a forma in questo modo. Questi div sono posizionati assolutamente negli angoli del suo genitore, e sono arredate di conseguenza, come descritto nel link postato da Sven Bieder

Answer 2

È possibile comporre questo utilizzando posizione assoluta :before e :after elementi con la tecnica 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

Guardate qui. Ci si trova tutto ciò che serve:

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

Modifica Nel caso in cui la connessione viene persa:

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>