web-dev-qa-db-fra.com

Comment dessiner une coche en utilisant CSS?

Commentdessinerle symbole de tick en utilisant CSS? Les symboles que je trouve en utilisant Unicode ne sont pas esthétiques.

EDITLes polices de caractères sont une bonne suggestion. Je cherchais quelque chose comme this .

cssdrawingcss-shapes
45
dayuloli

Vous pouvez maintenant inclure des polices Web et même réduire la taille du fichier avec uniquement les glyphes dont vous avez besoin . https://github.com/fontello/fontellohttp://fontello.com/

li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}
16
JohanVdR

Vous pouvez dessiner deux rectangles et les placer l'un à côté de l'autre. Et puis faire pivoter de 45 degrés. Modifiez les paramètres width/height/top/left pour toute variation.

DEMO 1

DEMO 2 (avec cercle)

HTML

<span class="checkmark">
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

CSS

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}
76
dayuloli

Voici une autre solution CSS. sa prend moins de ligne de code.

ul li:before
{content:'\2713';
  display:inline-block;
  color:red;
  padding:0 6px 0 0;
  }
ul li{list-style-type:none;font-size:1em;}

<ul>
    <li>test1</li>
    <li>test</li>
</ul>

Voici le lien de démonstration http://jsbin.com/keliguqi/1/

47
Kheema Pandey

Faire des transformations avec la lettre L

.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}
<div class="checkmark">L</div>

29
Henry

Une solution supplémentaire, lorsque vous ne disposez que de l'un des éléments: before /: after psuedo-elements, est décrite ici: : after-Checkbox à l'aide de bordures

Il utilise essentiellement les propriétés border-bottom et border-right pour créer la case à cocher, puis fait pivoter le L en miroir à l'aide de transform

Exemple

li {
  position: relative; /* necessary for positioning the :after */
}

li.done {
  list-style: none; /* remove normal bullet for done items */
}

li.done:after {
  content: "";
  background-color: transparent;
  
  /* position the checkbox */
  position: absolute;
  left: -16px;
  top: 0px;

  /* setting the checkbox */
    /* short arm */
  width: 5px;
  border-bottom: 3px solid #4D7C2A;
    /* long arm */
  height: 11px;
  border-right: 3px solid #4D7C2A;
  
  /* rotate the mirrored L to make it a checkbox */
  transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
To do:
<ul>
  <li class="done">Great stuff</li>
  <li class="done">Easy stuff</li>
  <li>Difficult stuff</li>
</ul>

16
Philip
li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
2
Okiemute Omuta

Je suggère d'utiliser un symbole de coche et non de le dessiner. Vous pouvez également utiliser des polices Web gratuites, par exemple: fontello [dot] com Vous pouvez remplacer le symbole de graduation par un glyphe de police Web.

Listes

ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

Voir ici: http://jsfiddle.net/hpmW7/3/

Cases à cocher

Vous avez même des polices Web avec des glyphes de symboles et des animations CSS 3. Pour IE8, vous devez appliquer un remplissage multiple car il ne comprend pas: coché.

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '✔';
  color: green;
}

Voir le violon JS: http://jsfiddle.net/VzvFE/37

2
JohanVdR

Vous voudrez peut-être essayer fontawesome.io

Il a une grande collection d'icônes. <i class="fa fa-check" aria-hidden="true"></i> devrait fonctionner pour vous. Il y a beaucoup d'icônes de vérification dans cela aussi. J'espère que ça aide.

1
gursahib.singh.sahni

j'aime cette façon parce que vous n'avez pas besoin de créer deux composants juste un.

.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-Origin: left top;
    transform-Origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

Animation de Scott Galloway Pen

0
BM2ilabs