zoukankan      html  css  js  c++  java
  • CSS3特殊图形制作

    CSS3特殊图形制作

    现在IE8+的浏览器都支持CSS3+HTML5了,IE8及以下的浏览器的浏览器也快告一段落了,大前端的时代来了。废话不多说,现在开始用CSS3画图

    1、心型

    //HTML
    
    <div class="box"></div>
    
    //css3
    
    <style>
        .box{
            position: relative;
             160px;
            height: 160px;
            border: 1px solid red;
        }
        .box:before{
            position: absolute;
            left: 20px;
             80px;
            height: 120px;
            content: '';
            background: #f00;
            border-radius: 100px 100px 0 0;
            transform: rotate(-45deg);
        }
        .box:after{
            position: absolute;
            left: 48px;
            top: 0px;
             80px;
            height: 120px;
            content: '';
            background: #f00;
            border-radius: 100px 100px 0 0;
            transform: rotate(45deg);
        }
    </style>

    2、太极符

    //HTML
    
    <div class="box"></div>
    
    //CSS3
    <style>
        .box{
            position: relative;
             96px;
            height: 48px;
            border-color: #000;
            border-style: solid;
            border- 2px 2px 50px 2px;
            background: #fff;
            border-radius: 100%;
        }
        .box:before{
            position: absolute;
            top: 50%;
            left: 0;
             12px;
            height: 12px;
            border: 18px solid #000;
            background: #fff;
            content: '';
            border-radius: 100%;
        }
        .box:after{
            position: absolute;
            top: 50%;
            left: 50%;
             12px;
            height: 12px;
            border: 18px solid #fff;
            background: #000;
            content: '';
            border-radius: 100%;
        }
    </style>

    3、扇形

    //html
    
    <div class="box"></div>

    //css3
    <style>
        .box{
             0;
            height: 0;
            border: 60px solid yellow;
            border-color: yellow transparent yellow yellow;
            border-radius: 60px;
        }
    </style>
  • 相关阅读:
    CSP 命令行选项(201403-3)
    ElasticSearch7.10的查询数据-简单查询
    ElasticSearch 种映射参数详解-理论学习02
    Elasticsearch7.10 -理论学习01
    ElasticSearch7.10索引
    ElasticSearch7.10的分词器
    ElasticSearch-7.10安装-2
    ElasticSearch第一天
    Idea的注释配置
    深圳第一站被骗消费3960元
  • 原文地址:https://www.cnblogs.com/yz-blog/p/6604983.html
Copyright © 2011-2022 走看看