14

Можете подсказать, как нарисовать в CSS такую галочку(нужно именно нарисовать, а не вставить картинкой)?

галочка

4
  • Вам в чекбокс или повсеместно? А в css тоже нельзя применять url() ? 15 ноя 2015 в 10:04
  • Нет, к сожалению нельзя. Мне просто галочку, без чекбокса). Как я понял, решения пока нет. Я применяю 2 наклонных линии, но пока безрезультатно. 15 ноя 2015 в 16:36
  • смотря в чем это будет использоваться. Если нужна поддержка векторных иконок, тогда лучше использовать svg или иконочные шрифты. Можно конечно нарисовать с transform rotate, но при неоднократном использовании такой методики это будет лишь перегружать код
    – Ni55aN
    15 ноя 2015 в 16:54
  • @Александр Агапов Добавлен свежий вариант с использованием входящим в тренд гугловских символьных шрифтов в стиле material design ru.stackoverflow.com/a/773972/28748 22 янв 2018 в 9:25

11 ответов 11

18

Вариант 1

[id^=c]{
    display: none;
}
[id^=c] + label{
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid green;
    text-align: center;    
}
[id^=c] + label:before{
    content: '\2713';
    display: inline-block;
    color: green;
    font-size: 30px;
    line-height: 30px;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
[id^=c]:checked + label:before{    
    -webkit-transform: scale(1);
    transform: scale(1);
}
<input type="checkbox" name="c1" id="c1" />
<label for="c1"></label>

Вариант 2

[id^=c]{
    display: none;
}
[id^=c] + label{
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid green;
    text-align: center;
    overflow: hidden;
    position: relative;
}
[id^=c]:checked + label span{
    position: relative;
    display: inline-block;    
    margin-left: -9px;   
}
[id^=c]:checked + label span:before{
    content: '';
    position: absolute; left: -5px;   
    width: 10px;
    height: 3px;
    background: #c00;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);    
}
[id^=c]:checked + label span:after{
    content: '';
    position: absolute; left: 0;
    width: 16px;
    height: 3px;
    background: #c00;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);       
}
<input type="checkbox" name="c1" id="c1" />
<label for="c1"><span></span></label>

Вариант 3 (clip-path)

[id^=c]{
    display: none;
}
[id^=c] + label{
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid green;
    text-align: center;   
    position: relative;
}
[id^=c] + label:before{
    content: '';    
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: green;
    -webkit-clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%);
clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform .3s;
    transition: transform .3s;
}
[id^=c]:checked + label:before{    
    -webkit-transform: scale(1);
    transform: scale(1);
}
<input type="checkbox" name="c1" id="c1" />
<label for="c1"></label>

1
  • Спасибо большое). Но мне просто галочку желательно сделать, как если бы мы вставляли картику через url) 15 ноя 2015 в 16:38
12

Если просто галочку без чекбокса, то вот идея:

.wrap {
    position: relative;
    margin-top: 100px;
}

.check-sign {
    position: absolute;
    background: red;
}

#check-part-1 {
    width: 50px;
    height: 20px;    
    transform:rotate(45deg);	
}

#check-part-2 {
    width: 100px;
    height: 20px;    
    transform: rotate(-45deg);
    left: 16px;
    top: -19px;
}
<div class="wrap">
    <div id="check-part-1" class="check-sign"></div>
    <div id="check-part-2" class="check-sign"></div>
</div>

Идея в том, чтобы нарисовать два прямоугольника и расположить их под прямыми углами относительно друг друга. Естественно это надо делать в их общем контейнере. С размерами и расположением если захотите, можете сами потом поиграться и сделать как вам нужно

9

Анимация галочки начинается после клика мышкой

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="94" height="94" viewBox="0 0 47 47"  >
 <title>animation icon -OK-</title> 
       <circle fill="#4CAF50" cx="24" cy="24" r="21"/>
         <path class="path" fill= "none" stroke ="#CCFF90" stroke-width ="1.5" stroke-dasharray= "70.2" stroke-dashoffset="70.2" 
		 d="M 34.6 14.6  L 21 28.2 L 15.4 22.6 L 12.6 25.4 L 21 33.8 L 37.4 17.4z">
		 <animate id="p1" attributeName="stroke-dashoffset" begin="svg1.click" values="70.2;0" dur="1.5s" repeatCount="1" fill="freeze" calcMode="paced" restart="whenNotActive"/> 
		 <animate id="f1" attributeName="fill" begin = "p1.end" values="#4CAF50; #CCFF90"  dur="1s" fill="freeze" restart="whenNotActive" /> 
 </path> 
</svg>	

4
  • 1
    SMIL сейчас deprecated, в Chrome когда-нибудь выпилят, а в IE/Edge никогда и не работало.
    – Qwertiy
    4 июл 2017 в 16:29
  • @Qwertiy уже, как два года deprecated и до сих пор жив и как говорится нет ничего более постоянного, чем временное Посмотри caniuse еще на 5 будущих версий вперед продлили 4 июл 2017 в 16:34
  • Но в IE/Edge всё равно нет и не будет.
    – Qwertiy
    4 июл 2017 в 16:42
  • 1
    @Qwertiy IE/Edge да, согласен, но кроме smil эти браузеры и многое другое делают очень криво. Но факт, остается фактом, SVG набирает популярность, особенно за бугром, недаром начиная c ie11 поддержка SVG выросла 4 июл 2017 в 16:49
7

Постарался повторить и упростить

i.check {
  display: inline-block;
  width: 25px;
  height: 40px;
  margin: -3px 10px 3px;
  border: solid red;
  border-width: 0 15px 15px 0;
  transform: rotate( 45deg);
}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!-- галочка css -->
<i class='check'></i>


<br />

<!-- картинка для сравнения -->
<img src='https://i.stack.imgur.com/u4kS2.jpg' />

7

Просто check галочка, просто SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>

6

Простейшая галочка. Толщину и цвет регулируйте сами:

.select_header {
  position: relative;
  font-size: 2em;
  padding-left: 70px;
}

.select_header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 30px;
  height: 20px;
  border-right: 7px solid #f88e11;
  border-bottom: 7px solid #f88e11;
  transform: rotate(45deg);
}
<div class="select_header">Выберите язык</div>

5

Такое простое решение:

.checkmark {
  display: inline-block;
  width: 45px;
  height: 14px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkmark_stem {
  position: absolute;
  width: 7px;
  height: 26px;
  background-color: #e84245;
  left: 25px;
  top: -8px;
}
.checkmark_kick {
  position: absolute;
  width: 20px;
  height: 6px;
  background-color: #e84245;
  left: 12px;
  top: 12px;
}
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>

4

Самая простая в мире галочка :

i {
  font-size: 40px;
  color: red;
}
<i> &#10004;</i>

Источник : https://html5book.ru/specsimvoly-html/

1
  • Вы же просто символ написали, а надо нарисовать.
    – user236939
    4 июл 2017 в 8:14
4

Ещё один вариант

Хорошо подойдёт для приложений, которые выполняются в стиле Material design, шрифт адаптирован для мобильных версий.

Галочку можно легко внедрить в HTML с помощью символьного шрифта от Google, достаточно просто подключить символьный шрифт и написать название иконки.

Выбирать иконки по названиям можно здесь

Подключение шрифта:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ниже пример использования.

Работает во всех браузерах. IE поддерживает начиная с 10 версии.

	  i {
  margin: 100px 50px 50px 80px;
  transition: transform 1s ease-in-out;
}
i:hover {
  transform: scale(10);
}

.green{color:yellowgreen;}
.red{color: red; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons green">done</i>
<i class="material-icons red">error</i> 

3

http://fontawesome.io/icon/check/

i {
color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-check" aria-hidden="true"></i>

2

Очень приближенно, для раскрытия метода:

#triangle-down {
  width: 0;
  height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-top: 50px solid red;
}
#triangle-down:before {
   content:"";
   position: absolute;
   top: -10px;
   left:0;
   width: 0;
   height: 0;
   border-left: 26px solid transparent;
   border-right: 26px solid transparent;
   border-top: 50px solid #fff;
}
#triangle-down:after {
   content:"";
   position: absolute;
   top: 0;
   left:0;
   width: 10px;
   height: 10px;
   background-color:#fff;
}
<div id="triangle-down">

</div>

Основная ссылка на примеры : здесь

Кое-что на Хабре : здесь

1
  • Спасибо). Но пока получается треугольник перевернутый). Скорее всего здесь надо действовать линиями) 15 ноя 2015 в 16:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.