Haz todo lo posible por entender el código bien previamente a aplicarlo a tu proyecto si tdeseas aportar algo puedes dejarlo en la sección de comentarios.
Solución:
.b:after
content: "]"
.b:before
content: "["
text
ejemplo de trabajo: http://codepen.io/yardenst/pen/bhGIy
Puede dibujar corchetes sin el uso de ningún pseudo elemento en CSS puro.
Pasos:
- Crea un elemento como o
y hazlo un
inline-block
por lo que su longitud depende de su contenido, es decir, la longitud de este elemento será tan larga como el contenido dentro de él.- Aplicar bordes izquierdo/derecho.
- Utilizar
linear-gradient()
para crear 4 imágenes de fondo con específicoswidth
/height
y dibuja en cada esquina de la caja conbackground-position
. El factor de altura debackground-size
debe ser igual aborder-left-width
.CSS necesario:
div background-image: linear-gradient(#ffb1bb, #ffb1bb), linear-gradient(#ffb1bb, #ffb1bb), linear-gradient(#ffb1bb, #ffb1bb), linear-gradient(#ffb1bb, #ffb1bb); background-repeat: no-repeat; background-size: 8px 3px; // ^^^ This value should be equal to width of left OR right border. background-position: top left, top right, bottom left, bottom right; border: solid #ffb1bb; border-width: 0 3px;
Recursos útiles:
-
Gradiente lineal: MDN, W3.
-
Imagen de fondo: MDN, W3.
Imagen de salida:
* box-sizing: border-box; body background: linear-gradient(white, silver); min-height: 100vh; margin: 0; .widget-title font: 20px/26px Arial, sans-serif; background-image: linear-gradient(#ffb1bb, #ffb1bb), linear-gradient(#ffb1bb, #ffb1bb), linear-gradient(#ffb1bb, #ffb1bb), linear-gradient(#ffb1bb, #ffb1bb); background-repeat: no-repeat; background-size: 8px 3px; background-position: top left, top right, bottom left, bottom right; border: solid #ffb1bb; text-align: justify; border-width: 0 3px; display: inline-block; vertical-align: top; padding: 5px 15px; margin: 20px;
WHAT’S NEW
This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence...
Sección de Reseñas y Valoraciones
Recuerda dar recomendación a esta noticia si te fue útil.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)Utiliza Nuestro Buscador