css-绘制无穷符号

xyc

     咱们继续之前说的css实现图形的效果方法，今天来说说无穷符号的实现方法。
     原理：通过border属性和设置伪元素的角度来实现。
     效果：
     
     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实现其他图形的样式方法。希望大家多多关注！

范范

支持下