CSS clip corners?

Question

Is there an easy way to style such an element?

It is assumed that it can be used on a mobile phone, so CSS3 is fully accessible. I can’t come up with a simple way. Images are out of the question.

It should be so blocky and should be inside the text (this is a blocky 8-bit button)

Answer 1

This eludes the start of the game, but it is different enough to guarantee its own answer.

• Instead of placing the color block excessively, it adds only red elements, allowing the background to show. HOWEVER, to correctly calculate (so that they are square corners!), I had to set a fixed height width . Probably some kind of wacky way to do this with interest, but to prove the concept it was too scary to behold. Since the requirement is for a fixed height of variable width, this should work.

• Pseudo-elements must have content or they are “crumbling”. The content may be empty, but this property must be set.

CSS

/* main button block */ .button { display:inline-block; background: #f00; position: relative; line-height: 60px; text-align: center; padding: 0 20px; height: 60px; margin-left: 0.5em; } /* common background color to all */ .button, .button::before, .button::after { background-color: #f00; } /* shared styles to make left and right lines */ .button::before, .button::after { content: ""; position: absolute; height: 50px; width: 5px; top: 5px; } /* pull the left 'line' out to the left */ .button::before { left: -5px; } /* pull the right 'line' out to the right */ .button::after { right: -5px; } 

Fiddle: http://jsfiddle.net/3R9c5/2/

Answer 2

How about this ?

HTML:

 <div class="block">(text goes here)</div> 

CSS

 body {background:#1990D7;} .block {background:#FF1200; line-height:52px; margin:8px auto; width:359px; position:relative; text-align:center; font-weight:bold; color:yellow} .block::before {display:inline-block; background:#FF1200; content:''; position:absolute; top:4px; left:-4px; bottom:4px; width:4px;} .block::after {display:inline-block; background:#FF1200; content:''; position:absolute; top:4px; right:-4px; bottom:4px; width:4px;} 

Edit: Updated after the latest question query information.

Answer 3

You can insert each of these four block corners by adding pseudo-elements via ::before or ::after .

eg:.

 .button { background: #f00; position: relative; } /* corner top left */ .button::after { position: absolute; top: 0; left: 0; width: 5px; height: 5px; background: #00f; } /* corner top right */ .button::after { position: absolute; top: 0; right: 0; width: 5px; height: 5px; background: #00f; } /* corner bottom left */ /* … */ 

Answer 4

CSS border-radius attribute

Answer 5

maybe this one will help you. Or you can just add a new class, for example "cadre"

 .cadre { border-radius: 10px; } 

into your css file and then apply it to the div.

Answer 6

I don't think border-radius can do this. This is the easiest way:

http://jsfiddle.net/DpLdt/

CSS

 body { background:blue; } div#clipcorners { width:500px; height:200px; background:red; position:relative; margin:100px auto; } span#a,span#b { position:absolute; width:10px; height:180px; top:10px; background:red; } span#a { left:-10px; } span#b { right:-10px; } 

HTML:

 <div id="clipcorners"> <span id="a"> </span> <span id="b"> </span> </div>​