web-dev-qa-db-fra.com

Dessiner un X en CSS

J'ai un div qui ressemble à un carré orange

enter image description here

Je voudrais dessiner un X blanc dans cette div en quelque sorte afin qu'il ressemble plus à

enter image description here

Quoi qu'il en soit, faire cela en CSS ou est-ce que ce sera plus facile de simplement dessiner cela dans Photoshop et d’utiliser l’image comme arrière-plan div? Le code div ressemble à

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

Vous pouvez simplement mettre la lettre X dans le code HTML à l'intérieur de la division, puis la nommer avec css.

Voir 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;
}
11
AT92

Vous voulez une entité appelée marque de croix:

http://www.fileformat.info/info/unicode/char/274c/index.htm

Le code pour cela est &#10060; et il s’affiche comme

Si vous voulez une marque de croix parfaitement centrée, comme ceci:

cross mark demo

essayez le CSS suivant:

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

Voir Démo Violon

Problème inter-navigateur

L'entité de marque de croix ne s'affiche pas avec Safari ou Chrome. Cependant, la même entité s’affiche correctement dans Firefox, IE et Opera.

Il est prudent d'utiliser l'entité de signe de multiplication plus petite mais de forme similaire, &#xd7; qui affiche comme ×.

74
Marc Audet

solution mono-élément:enter image description here

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>
56
Gildas.Tambo

Encore une autre tentative ... celle-ci utilise ×. Beaucoup d'exemples sur cette page ne sont pour moi qu'une boîte, mais &times; travaux

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

15
Gray

Encore une autre solution pure CSS (sans utilisation d’images, de caractères ou de polices supplémentaires), basée sur @ Bansoa est la réponse = 's réponse .

Je l'ai simplifié et ajouté un peu de Flexbox magique pour le rendre réactif.

Dans cet exemple, Cross s'adapte automatiquement à tout conteneur carré et, pour modifier l'épaisseur de ses lignes, il suffit d'ajuster height: 4px; (pour faire une croix vraiment sensible , vous pouvez définir le height en pourcent ou en autres unités relatives).

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>
12
TranslucentCloud

Vous pouvez utiliser la propriété CSS "contenu":

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

div:after {
    content: "X";
    font-size: 2em; 
    color: #FFF;
}

Comme ceci: http://jsfiddle.net/HKtFV/

9
António Regadas
#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>
8
user669677

Vous pouvez faire un joli Nice X avec des dégradés CSS:

screenshot

démo: https://codepen.io/JasonWoof/pen/rZyRKR

code:

<span class="close-x"></span>
<style>
    .close-x {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 7px solid #f56b00;
        background:
            linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
            linear-gradient(135deg, #f56b00 0%,#f56b00 43%,#fff 45%,#fff 55%,#f56b00 57%,#f56b00 100%);
    }
</style>
5
JasonWoof

Vous pouvez le faire en appelant un "x"

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

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

4
Explosion Pills

J'aime cette question! Vous pouvez facilement adapter mon code ci-dessous à un blanc × sur un carré orange:

enter image description here

Violon de démonstration ici

Voici le SCSS (qui pourrait facilement être converti en 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);
  }
}
3
Ryan

[~ # ~] 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/

1
Dennis Sørensen