Encontré fragmentos de este código en http://www.css3shapes.com/, pero no puedo entender la lógica que hay detrás. Quiero decir que conozco la función del selector anterior y posterior. Con lo que estoy confundido es por qué tenemos { height:0; width:40px; } en el codigo Si alguien puede dar una explicación completa sobre este código, será muy apreciado.
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
Respuestas
4 para la respuesta № 1Si cambia algunos de los colores, puede ver qué está pasando: el bit "después" es como la parte superior de un marco de imagen biselado:
La parte superior del marco es roja, los lados son verdes y azules, pero no hay fondo, y el tamaño de la "imagen" en el marco es ancho 40, altura cero (es decir, la línea a lo largo del borde inferior del rojo). poco).
Si agrega la parte inferior que falta y hace la altura 40, puede ver todo el marco:
0 para la respuesta № 2
Es un truco para forzar a css a representar una forma triangular. Echa un vistazo a #octagon: before {...}
El ancho de borde inferior determina la altura del elemento. Los bordes de los lados se agregan al ancho definido, lo que le da a la forma un ancho de 100 px.
Puedes imaginar la altura: 0 actuando como un punto de fuga en la distancia. Ambos lados se mueven hacia él, pero en este caso nunca lo alcances ya que el ancho (100) es mayor que la altura 30.
La diferencia entre el triángulo y el octágono es el ancho adicional:
width: 40px;
Juega con su ejemplo: http://jsfiddle.net/mXTrG/ El gris es los bordes laterales y el azul es el borde inferior.
¿Tiene sentido? ¡Hazme saber si tienes alguna pregunta!