css3 - Implemented using css folded corners -

css3 - Implemented using css folded corners -

https://www.dropbox.com/s/4u6xidqdqaxjjid/1.png?dl=0

can utilize ssc implement such angles in block?

do not want create pictures.

who knows, please tell me.

try combination of css pseudo elements (w3c spec) , css border radius (w3c spec):

jsfiddle demo

class="snippet-code-css lang-css prettyprint-override">.box { position: relative; padding: 10px; margin: 30px auto; background: darkorange; width: 300px; } .content { position: relative; z-index: 2; } .top-bottom, .left-right { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; } .top-bottom:before, .top-bottom:after { z-index: 1; content: ""; display: block; position: absolute; background: darkorange; right: 0; left: 0; height: 12px; border: 4px solid darkgreen; } .top-bottom:before { top: -12px; border-bottom: 0; border-top-left-radius: 13px; border-top-right-radius: 13px; } .top-bottom:after { bottom: -12px; border-top: 0; border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; } .left-right:before, .left-right:after { content: ""; display: block; position: absolute; background: darkorange; top: 0; bottom: 0; width: 12px; border: 4px solid darkgreen; } .left-right:before { left: -12px; border-top-left-radius: 13px; border-bottom-left-radius: 13px; border-right: 0; } .left-right:after { right: -12px; border-top-right-radius: 13px; border-bottom-right-radius: 13px; border-left: 0; } class="snippet-code-html lang-html prettyprint-override"><div class="box"> <div class="top-bottom"></div> <div class="left-right"></div> <div class="content"> lorem ipsum dolor sit down amet, consectetur adipisicing elit. quisquam iusto magnam natus amet in assumenda iure recusandae aspernatur animi blanditiis molestiae sunt nisi temporibus reprehenderit nesciunt doloribus fugit aliquam! vero! </div> </div>

css css3