Как нарисовать форму сердца с помощью css

CSS

Часто встречаются шаблоны в форме сердца, такие как сценарии использования симпатии и антипатии. Предыдущее использование было доступом к изображению, какimgилиbackgroundImageВставить в дом. Теперь сделайте это самостоятельно с помощью css, чтобы нарисовать узор сердца.

в форме сердца

подготовить одинdomЭлементы следующие, дляidназначить какheart

<div id="heart"></div>

Добавьте ширину и высоту

#heart {
    position: relative;
    width:50px;
    height:40px;
}

Теперь он должен быть широким.50px,высоко40pxПрямоугольник, не побежал. Теперь начните манипулировать псевдоэлементами

/*上一步骤的代码省略...*/

#heart:before,
#heart:after{
  position: absolute;
  left:0;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 20px 20px 0 0;
}
#heart:after {
  content: '';
  left: 25px;
  top:0
}

эммм... форма не может быть описана, изображение выше все еще... пока форма должна быть такой.

Следующее, что нужно сделать, этоbeforeа такжеafterДве части контента чередуются. код показывает, как показано ниже:

#heart:before,
#heart:after{
  position: absolute;
  left:25px;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 40px 40px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  content: '';
  left: 0;
  top:0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Картинка выше картинка выше...

Это работает, спасибо за чтение.

Исходный код здесьили посетитьмой блог

Категории