苏飞论坛

标题: css-绘制心形 [打印本页]

---

作者: xyc    时间: 2021-7-1 16:28
标题: css-绘制心形
     咱们继续之前说的css实现图形的效果方法，今天来说说心形的实现方法。
     原理：使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。
     效果：
      (, 下载次数: 12)

上传

点击文件名下载附件
      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实现其他图形的样式方法。希望大家多多关注！

---

作者: 范范    时间: 2021-7-1 16:37
支持支持

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4