Esquinas de clips CSS?

Question

¿Hay una manera simple de estilo elemento de esta manera?

supone que se utiliza en un móvil de modo CSS3 está totalmente disponible. No se puede pensar de una manera simple. Las imágenes están fuera de dudas.

Tiene que ser este bloque y no supone que es un texto dentro (esto es un botón de bloque de 8 bits)

Answer 1

Esto salta de los comienzos de feeela, pero es lo suficientemente diferente como para justificar su propia respuesta.

1. En lugar de poner un bloque de color excesivamente, solo agrega elementos de color rojo, permitiendo que se vea el fondo. SIN EMBARGO, para calcularlo correctamente (¡para que sean esquinas cuadradas!) Tuve que establecer una anchura fija de de alto. Probablemente haya algún tipo de forma alocada de hacer esto con porcentajes, pero como prueba de concepto, era demasiado dolor de cabeza como para contemplarlo. Como el requisito es para el ancho variable de altura fija, esto debería funcionar.

2. Los pseudo-elementos necesitan tener contenido o "colapsarán". El contenido puede estar vacío, pero esa propiedad debe establecerse.

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

violín: http://jsfiddle.net/3R9c5/2/

Answer 2

El atributo CSS frontera de radio

Answer 3

quizá this le ayudará. O simplemente puede añadir nueva clase, "cuadros", por ejemplo

.cadre 
{ 
border-radius: 10px; 
} 

a su archivo CSS, entonces afectará a la div.

Answer 4

No creo que border-radius pueda lograr eso. Esta es la forma más simple que puedo pensar:

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

Answer 5

Puede insertar cada uno de los que cuatro bloques -las esquinas agregando pseudo-elementos a través de ::before o ::after.

ej .:

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

¿Qué tal 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;} 

Editar: actualizado después de los últimos conocimientos sobre las exigencias de la pregunta.