css实现的心形图标

最新推荐文章于 2024-05-25 09:11:17 发布

转载最新推荐文章于 2024-05-25 09:11:17 发布 · 559 阅读

<div class="heart icon"></div>
.heart.icon {
  color: #000;
  position: absolute;
  margin-top: 6px;
  margin-left: 5px;
  width: 9px;
  height: 9px;
  border-left: solid 1px #999;
  border-bottom: solid 1px #999;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
 
.heart.icon:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -1px;
  width: 8px;
  height: 5px;
  border-radius: 5px 5px 0 0;
  border-top: solid 1px #999;
  border-left: solid 1px #999;
  border-right: solid 1px #999;
}
 
.heart.icon:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-radius: 0 5px 5px 0;
  border-top: solid 1px #999;
  border-right: solid 1px #999;
  border-bottom: solid 1px #999;
}