Corchetes con CSS

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íficos width / height y dibuja en cada esquina de la caja con background-position. El factor de altura de background-size debe ser igual a border-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.

Utiliza Nuestro Buscador