web-dev-qa-db-fra.com

Faire un symbole plus dans le CSS

J'ai le code CSS ci-dessous qui donne le symbole + mais ne correspond pas à la conception fondamentalement, il doit être mince. Voir l'extrait et Codpen

.plus {
  position:relative;
  border: 1px dotted white;
  width: 3px;
  height: 3px;
  background-color: black;
  box-sizing: border-box;
  transform: scale(11);
}
<div class="plus"></div>

Devrait ressembler au symbole ci-dessous: -Plus symbol in CSS

Tout autre style me convient également, mais devrait ressembler à l'instantané.

htmlcsscss-shapes
6
Sharath

Utilisez fond de Mulipe comme ci-dessous:

.plus {
  display:inline-block;
  width:50px;
  height:50px;
  
  background:
    linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),
    #000;
  background-position:center;
  background-size: 50% 2px,2px 50%; /*thickness = 2px, length = 50% (25px)*/
  background-repeat:no-repeat;
}

.alt {
  background:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  background-position:center;
  background-size: 50% 2px,2px 50%; /*thickness = 2px, length = 50% (25px)*/
  background-repeat:no-repeat;
}
.radius {
  border-radius:50%;
}
<div class="plus">
</div>

<div class="plus alt">
</div>

<div class="plus radius">
</div>

plus sign CSS

Et voici avec transparence:

.plus {
  width:50px;
  height:50px;
  display:inline-block;
  
  background:
    linear-gradient(#000,#000) top left,
    linear-gradient(#000,#000) top right,
    linear-gradient(#000,#000) bottom left,
    linear-gradient(#000,#000) bottom right;
  background-size: calc(50% - 1px) calc(50% - 1px); /*thickness = 2px (2*1px) */
  background-repeat:no-repeat;
  border:10px solid #000; /*length = 30px (50px - 2x10px) */
  box-sizing:border-box;
}

.radius {
  border-radius:50%;
}

body {
 background:pink;
}
<div class="plus">
</div>

<div class="plus radius">
</div>

plus symbol with CSS

Nous pouvons ajouter une variable CSS pour contrôler facilement la forme de sural.

.plus {
  --t:2px;   /* Thickness */
  --l:40px;  /* size of the symbol */
  --s:10px;  /* space around the symbol */
  --c1:#fff; /* Plus color*/
  --c2:#000; /* background color*/

  display:inline-block;
  width:var(--l);
  height:var(--l);
  padding:var(--s);
  box-sizing:border-box; /*Remove this if you don't want space to be included in the size*/
  
  background:
    linear-gradient(var(--c1),var(--c1)) content-box,
    linear-gradient(var(--c1),var(--c1)) content-box,
    var(--c2);
  background-position:center;
  background-size: 100% var(--t),var(--t) 100%;
  background-repeat:no-repeat;
}

.radius {
  border-radius:50%;
}
<div class="plus"></div>
<div class="plus" style="--l:35px;--t:3px;--c2:green"></div>
<div class="plus" style="--l:50px;--t:1px;--s:5px;--c1:red;"></div>
<div class="plus" style="--l:35px;--t:5px;--s:0px;--c1:blue;--c2:orange;"></div>

<br>
<div class="plus radius"></div>
<div class="plus radius" style="--l:35px;--t:3px;--c2:green"></div>
<div class="plus radius" style="--l:50px;--t:1px;--s:5px;--c1:red;"></div>
<div class="plus radius" style="--l:35px;--t:5px;--s:0px;--c1:blue;--c2:orange;"></div>

plus sign with CSS

7
Temani Afif

Je conseillerais également d'utiliser le symbole réel:

.plus {
  display: block;
  height: 0.6em;
  width: 0.6em;
  font-size: 100px;
  text-align: center;
  line-height: 0.5em;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  color: #ffffff;
  background-color: #000000;
}

.plus::before {
  display: block;
  content: '+';
}
<div class="plus"></div>

Fiddle: https://jsfiddle.net/m5de0ycl/

Ensuite, changez simplement la taille de la police pour la taille, et si ce n'est pas assez mince pour vous, vous pouvez modifier la famille de polices en une plus étroite.

Edit: @ La solution de Temani-Afif est plus diversifiée. Je recommanderais sa mine au-dessus de la mine, en fonction de vos besoins de compatibilité: Symbole de plus en CSS

1
joshdoescode

Je recommanderais de travailler avec avant et après les pseudo-éléments pour y parvenir.

Fondamentalement, j'ai utilisé uniquement la DIV sous forme de fond noir, utilisée l'élément avant la ligne verticale et l'élément après la ligne horizontale.

.plus {
  position: relative;
  width:20px;
  height:20px;
  background:#000;
}

.plus:before,
.plus:after {
  content: "";
  position:absolute;
  background:#fff;
}

/* the vertical line */
.plus:before {
  left:50%;
  top:4px; /* this defines how much black "border" there should be */
  bottom:4px;
  width:2px;
  transform:translateX(-50%);
}

/* the horizontal line */
.plus:after {
  top:50%;
  left:4px;
  right:4px;
  height:2px;
  transform:translateY(-50%);
}

Voici un exemple complet: https://codepen.io/fitzi/pen/zbmbrvw

0
Fitzi