triangle - ¿Cómo dibujar una marca de verificación/marca utilizando CSS?

triangle css

Question

¿Cómo dibujar el símbolo de tick utilizando CSS? Los símbolos que encuentro usando Unicode no son estéticamente agradables.

Las fuentes EDIT Icon son una gran sugerencia. Estaba buscando algo como this .

Answer 1

A continuación se describe una solución adicional, para cuando solo tiene uno de los: antes /: después de psuedo-elements disponibles :: después de Checkbox usando bordes

Básicamente usa las propiedades de border-bottom y border-right para crear la casilla de verificación y luego gira la L reflejada usando la transform

Ejemplo

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>

Answer 2

Ahora puede incluir fuentes web e incluso reducir el tamaño del archivo con solo los glifos que necesita. https://github.com/fontello/fontello http://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;
}

Answer 3

Aquí hay otra solución CSS. es tomar menos línea de código.

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>

Aquí está el enlace de demostración http://jsbin.com/keliguqi/1/

Answer 4

Es posible que desee probar fontawesome.io

Tiene gran colección de iconos. Para usted, <i class="fa fa-check" aria-hidden="true"></i> debería funcionar. Hay muchos iconos de verificación en esto también. Espero eso ayude.

Answer 5

Haz algunas transformaciones con la letra 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>

Answer 6

Me gusta de esta manera porque no necesitas crear dos componentes solo uno.

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

Animación de la pluma de Scott Galloway

Answer 7

Puedes dibujar dos rectángulos y colocarlos uno al lado del otro. Y luego girar en 45 grados. Modifique los parámetros de ancho / alto / superior / izquierdo para cualquier variación.

DEMO 1

DEMO 2 (Con círculo)

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

Answer 8

Sugiero usar un símbolo de garrapata no dibujarlo. O use fuentes web que son gratuitas, por ejemplo: fontello [punto] com Puede reemplazar el símbolo de la marca con un glifo de fuente web.

Liza

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

Consulte aquí: http://jsfiddle.net/hpmW7/3/

Casillas de verificación

Incluso tienes fuentes web con glifos de símbolos de tick y animaciones CSS 3. Para IE8 necesitaría aplicar un polyfill ya que no se comprende: marcado.

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

Vea el violín de JS: http://jsfiddle.net/VzvFE/37

Answer 9

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