Este team de expertos pasados ciertos días de investigación y de juntar de datos, hemos dado con la respuesta, esperamos que resulte de gran utilidad en tu plan.
Solución:
Desea una entidad conocida como marca cruzada:
http://www.fileformat.info/info/unicode/char/274c/index.htm
El código para ello es ❌ y se muestra como ❌
Si desea una marca de cruz perfectamente centrada, así:
prueba el siguiente CSS:
div
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
position: relative;
div:after
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "274c"; /* use the hex value here... */
font-size: 50px;
color: #FFF;
line-height: 100px;
text-align: center;
Ver violín de demostración
Problema entre navegadores
La entidad de marca cruzada no se muestra con Safari o Chrome. Sin embargo, la misma entidad se muestra bien en Firefox, IE y Opera.
Es seguro usar la entidad de signo de multiplicación más pequeña pero de forma similar, × que se muestra como ×.
solución de un solo elemento:
body
background:blue;
div
width:40px;
height:40px;
background-color:red;
position:relative;
border-radius:6px;
box-shadow:2px 2px 4px 0 white;
div:before,div:after
content:'';
position:absolute;
width:36px;
height:4px;
background-color:white;
border-radius:2px;
top:16px;
box-shadow:0 0 2px 0 #ccc;
div:before
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
left:2px;
div:after
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
right:2px;
Aún otra CSS puro solución (es decir, sin el uso de imágenes, caracteres o fuentes adicionales), basada en @Bansoa es la respuesta de la respuesta.
Lo simplifiqué y agregué un poco de magia Flexbox para que responda.
Cross en este ejemplo se escala automáticamente a cualquier contenedor cuadrado, y para cambiar el grosor de sus líneas solo hay que sintonizar height: 4px; (hacer una cruz realmente receptivoes posible que desee configurar el height en porcentajes u otras unidades relativas).
div
position: relative;
height: 150px; /* this can be anything */
width: 150px; /* ...but maintain 1:1 aspect ratio */
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid pink; /* not required, added for better visibility */
div::before,
div::after
position: absolute;
content: '';
width: 100%;
height: 4px; /* cross thickness */
background-color: black;
div::before
transform: rotate(45deg);
div::after
transform: rotate(-45deg);
Sección de Reseñas y Valoraciones
Si entiendes que ha resultado de ayuda nuestro artículo, sería de mucha ayuda si lo compartieras con más juniors de esta manera contrubuyes a difundir esta información.