苏飞论坛

标题: css-绘制无穷符号 [打印本页]

---

作者: xyc    时间: 2021-7-2 17:03
标题: css-绘制无穷符号
     咱们继续之前说的css实现图形的效果方法，今天来说说无穷符号的实现方法。
     原理：通过border属性和设置伪元素的角度来实现。
     效果：
      (, 下载次数: 9)

上传

点击文件名下载附件
     HTML：
     

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

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

     css样式：
     

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

  .div {

    width: 220px;

    height: 100px;

    float: left;

    position: relative;

   }

   .div:before, .div:after {

    content: "";

    width: 60px;

    height: 60px;

    position: absolute;

    top: 0;

    left: 0;

    border: 20px solid #008bb0;

    -moz-border-radius: 50px 50px 0;

    border-radius: 50px 50px 0 50px;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

   }

   .div:after {

    left: auto;

    right: 0;

    -moz-border-radius: 50px 50px 50px 0;

    border-radius: 50px 50px 50px 0;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

   }

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

---

作者: 范范    时间: 2021-7-2 17:16
支持下

---

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

Powered by Discuz! X3.4