CSS clip corners?

Question

Is there a simple way to style element like this?

Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.

It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)

Answer 1

This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.

1. Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.

2. The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to 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 insights into the demands of the question.

Answer 3

You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.

e.g.:

.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 */
/* … */