icon - title html definicion

Dibuja una X en CSS

Question

Tengo un div que parece un cuadrado naranja

Me gustaría dibujar una X blanca en este div de alguna manera para que se vea más como

De todos modos, para hacer esto en CSS o va a ser más fácil dibujar esto en Photoshop y usar la imagen como fondo div. El código div solo se ve como

div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}

Answer 1

¡Me encanta esta pregunta! Podrías adaptar fácilmente mi código a continuación para que sea un × blanco en un cuadrado naranja:

Demo violín aquí

Aquí está el SCSS (que podría convertirse fácilmente a CSS ):

$pFontSize: 18px;
p {
font-size: $pFontSize;
}
span{
font-weight: bold;
}
.x-overlay,
.x-emoji-overlay {
position: relative;
}
.x-overlay,
.x-emoji-overlay {
&:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: red;
text-align: center;
}
}
.x-overlay:after {
content: ''/d7'';
font-size: 3 * $pFontSize;
line-height: $pFontSize;
opacity: 0.7;
}
.x-emoji-overlay:after {
content: "/274c";
padding: 3px;
font-size: 1.5 * $pFontSize;
line-height: $pFontSize;
opacity: 0.5;
}
.strike {
position: relative;
display: inline-block;
}
.strike::before {
content: '''';
border-bottom: 2px solid red;
width: 110%;
position: absolute;
left: -2px;
top: 46%;
}
.crossed-out {
/*inspired by https://www.tjvantoll.com/2013/09/12/building-custom-text-strikethroughs-with-css/*/
position: relative;
display: inline-block;
&::before,
&::after {
content: '''';
width: 110%;
position: absolute;
left: -2px;
top: 45%;
opacity: 0.7;
}
&::before {
border-bottom: 2px solid red;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
}
&::after {
border-bottom: 2px solid red;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
}
}

Answer 2

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 quieres una marca cruzada 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 Demo Fiddle

Problema del navegador cruzado

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 ×.

Answer 3

Otra solución pura de CSS (es decir, sin el uso de imágenes, caracteres o fuentes adicionales), basada en @Bansoa, es la answer .

Lo simplifiqué y agregué un poco de Magia Flexbox para hacerlo receptivo.

La cruz en este ejemplo se escala automáticamente a cualquier contenedor cuadrado, y para cambiar el grosor de sus líneas solo tiene que ajustar la height: 4px; (para hacer que una cruz realmente responda , puede establecer la height en porcentajes u otras unidades relativas).

div {
position: relative;
height: 200px; /* this can be anything */
width: 200px; /* ...but maintain 1:1 aspect ratio */
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid pink;
}
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);
}

<div></div>

Answer 4

Otro intento más ... este usa ×. Muchos de los ejemplos en esta página solo se muestran para mí como un cuadro, pero × trabajos

HTML

<div class="close"></div>

CSS

.close {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
.close:after {
position:relative;
content:"/d7";
font-size:177px;
color:white;
font-weight:bold;
top:-53px;
left:-2px
}

JSFIDDLE

Answer 5

Podrías hacer esto diseñando una "x"

text-align: center;
font-size: 120px;
line-height: 100px;
color: white;
font-family: monospace;

http://jsfiddle.net/Ncvyj/1/

Answer 6

Podrías simplemente poner la letra X en el HTML dentro del div y luego darle un estilo con css.

Ver JSFiddle: http://jsfiddle.net/uSwbN/

HTML:

<div id="orangeBox">
<span id="x">X</span>
</div>

CSS:

#orangeBox {
background: #f90;
color: #fff;
font-family: ''Helvetica'', ''Arial'', sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center;
width: 40px;
height: 40px;
border-radius: 5px;
}

Answer 7

Puede usar el "contenido" de la propiedad CSS:

div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
div:after {
content: "X";
font-size: 2em;
color: #FFF;
}

Me gusta esto: http://jsfiddle.net/HKtFV/

Answer 8

solución de elemento único:

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;
}

<div></div>

Answer 9

HTML

<div class="close-orange"></div>

CSS

.close-orange {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
.close-orange:before,.close-orange:after{
content:'''';
position:absolute;
width: 50px;
height: 4px;
background-color:white;
border-radius:2px;
top: 55px;
}
.close-orange:before{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
left: 32.5px;
}
.close-orange:after{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
left: 32.5px;
}

https://jsfiddle.net/cooperwebdesign/dw4xd289/

Answer 10

#x{
width: 20px;
height: 20px;
background-color:orange;
position:relative;
border-radius:2px;
}
#x::after,#x::before{
position:absolute;
top:9px;
left:0px;
content:'''';
display:block;
width:20px;
height:2px;
background-color:red;
}
#x::after{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#x::before{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

<div id=x>
</div>