css-绘制心形

xyc

     咱们继续之前说的css实现图形的效果方法，今天来说说心形的实现方法。
     原理：使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。
     效果：
     
      html：
      

[HTML] 纯文本查看 复制代码

<div class="div"></div>

      css样式：
      

[CSS] 纯文本查看 复制代码

   .div {
    float: left;
    position: relative;
   }
   .div:before, .div:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
  .div:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
   }

   以上就是心形的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

范范

支持支持