Esto salta de los comienzos de feeela, pero es lo suficientemente diferente como para justificar su propia respuesta.
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.
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/
¿Está buscando las esquinas redondeadas o pequeños cuadrados retirados de ellos? – mikevoermans
Una imagen generalmente vale más que mil palabras, pero en este caso, necesita unas pocas palabras más para explicar la imagen. ¿O realmente quieres * exactamente * lo que se muestra? – gilly3
Sí, ese es todo el punto. Cuadrados restados del BG en las esquinas. Es parte de un juego de navegador de 8 bits. Espero que tenga sentido por qué necesito esas miradas cuadradas :) Y se supone que hay un texto en este elemento – Max