ウェブ家の備忘録

ウェブデザイナーの備忘録

CSS : ハートマーク

 

<style>
  .heart{
    background:red;
    width:40px;
    height:60px;
    margin:15px auto;
    border-radius:50px 50px 0 0;
    transform:rotate(-45deg);
    position:relative;
  }
  .heart:after{
    content:'';
    width:40px;
    height:60px;
    background:red;
    border-radius:50px 50px 0 0;
    position:absolute;
    transform:rotate(90deg);
    left:10px;
    bottom:-10px;
  }
  </style>
<div class="heart"></div>