Dessiner un X en CSS

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

entrez la description de l'image ici

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

entrez la description de l'image ici

De toute façon pour le faire en CSS ou va-t-il être plus facile de simplement dessiner cela dans Photoshop et d'utiliser l'image comme arrière-plan div? Le code div ressemble juste à 

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}
34
demandé sur Gildas.Tambo 2013-09-20 19:31:49

11 réponses

Vous pouvez simplement mettre la lettre X dans le HTML à l'intérieur du div, puis le styliser 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
répondu Godge 2013-09-20 15:45:13

Vous voulez une entité appelée marque croisée:

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 croix parfaitement centrée, comme ceci:

marque de la croix de démonstration

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 La Démo De Violon

Problème Entre Navigateurs

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

Il est sûr d'utiliser l'entité de signe de multiplication plus petite mais de forme similaire, {[2] } qui s'affiche comme ×.

67
répondu Marc Audet 2015-07-07 19:23:07

Solution à élément unique: entrez la description de l'image ici

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>
51
répondu Gildas.Tambo 2015-02-15 14:45:20

Encore une tentative... celui-ci utilise ×. Beaucoup d'exemples sur cette page montrent seulement pour moi, comme une boîte, mais &times; œuvres

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

14
répondu Gray 2013-09-20 15:52:11

Encore une autre solutionCSS pure (c'est-à-dire sans l'utilisation d'images, de caractères ou de polices supplémentaires), basée sur @Bansoa est la réponse réponse .

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

Cross dans cet exemple s'adapte automatiquement à n'importe quel Conteneur carré, et pour changer l'épaisseur de ses lignes, il suffit de régler height: 4px; (pour faire une croix vraiment réactive , Vous pouvez définir le height en pourcentage ou 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>
10
répondu TranslucentCloud 2017-05-23 12:02:46

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/

8
répondu António Regadas 2013-09-20 15:36:58 

#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>
7
répondu 2014-09-22 15:15:24

Vous pouvez le faire en stylisant un " x " 

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

Http://jsfiddle.net/Ncvyj/1/

4
répondu Explosion Pills 2013-09-20 15:40:45

J'adore cette question! Vous pouvez facilement adapter mon code ci-dessous pour être un blanc × sur un carré orange:

entrez la description de l'image ici

Démo de violon 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
répondu Ryan 2017-03-11 15:51:09

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
répondu Dennis Sørensen 2016-08-20 11:21:00

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

capture

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>
1
répondu JasonWoof 2018-09-03 00:05:22