zoukankan      html  css  js  c++  java

  • CSS绘制简单图形

    　究竟该用字体图标、图片图标、还是CSS画一个图标？我也不知道。各有千秋吧。本文将介绍如何用css绘制简单的图形，所有测试在chrome58.0完成，如果你不能得到正确结果请到caniuse查一查看看是不是需要什么前缀。

    一、基础

    复制代码
    <!DOCTYPE html>
<html>
<head>
    <title>basic shapes</title>
    <style type="text/css">
        div{
            box-sizing: border-box;
        }
        .div1{
             100px;
            height: 100px;
            border-top: 50px solid red;
            border-right: 50px solid blue;
            border-bottom: 50px solid yellow;
            border-left: 50px solid green;
        }

        .div2{
             100px;
            height: 100px;
            border-right: 50px solid blue;
            border-bottom: 100px solid yellow;
            border-left: 50px solid green;
        }
        .div3{
             100px;
            height: 100px;
            border-right: 25px solid blue;
            border-bottom: 100px solid yellow;
            border-left: 25px solid green;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <span>border的神奇之处</span>
    <hr>
    <div class="div2">div2</div>
    <span>黄色三角形，底边100px高100px</span>
    <hr>
    <div class="div3">div3</div>
    <span>黄色的等腰梯形，上底50,下底100,高100</span>
</body>
</html>
    复制代码

    　　上面代码的效果是这样的

    　　

    　　border是如何工作的，你可以从上面的结果自行体会。

    二、特殊三角形

    　　

    复制代码
    <!DOCTYPE html>
<html>
<head>
    <title>三角形</title>
    <style type="text/css">
        div{
            box-sizing: border-box;
            margin:20px;
        }
        .container::after{
            content: "";
            display: block;
            clear: both;
        }
        .div1{
             100px;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            float: left;
        }
        .div2{
             0;
            height: 100px;
            border-bottom: 50px solid transparent;
            border-left: 100px solid blue;
            border-top: 50px solid transparent;
            float: left;
        }
        .div3{
             100px;
            height: 0;
            border-top: 100px solid yellow;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            float: left;
        }
        .div4{
             0;
            height: 100px;
            border-bottom: 50px solid transparent;
            border-right: 100px solid green;
            border-top: 50px solid transparent;
            float: left;
        }
        .div5{
             100px;
            height: 0;
            border-bottom: 86.6px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            float: left;
        }
        .div6{
             100px;
            height: 0;
            border-bottom: 100px solid blue;
            /*border-left: 50px solid transparent;*/
            border-right: 100px solid transparent;
            float: left;
        }
        .div7{
             100px;
            height: 0;
            border-bottom: 100px solid blue;
            /*border-left: 50px solid transparent;*/
            border-right: 100px solid transparent;
            float: left;
            transform: rotate(135deg);
            transform-origin: 50% 50%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>等腰三角形</h4>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
    <div class="container">
        <h4>其他特殊三角形</h4>
        <div class="div5">等边</div>
        <div class="div6">直角</div>
        <div class="div7">直角</div>
    </div>
</body>
</html>
    复制代码

    　　

    　　等腰三角形我做了4个方向的，当然你也可以用旋转来做，就像div7那样。制作三角形比较简单，只要对我前面将的基础加以改造就可以了。

    三、特殊四边形

    　　

    复制代码
    <!DOCTYPE html>
<html>
<head>
    <title>四边形</title>
    <style type="text/css">
        div{
            box-sizing: border-box;
            margin:20px;
        }
        .container::after{
            content: "";
            display: block;
            clear: both;
        }
        .div1{
            background: transparent;
             0;
            height: 100px;
            border-bottom: 50px solid transparent;
            border-right: 100px solid green;
            border-top: 50px solid transparent;
            float: left;
            position: relative;
            box-sizing: border-box;

        }
        .div1::after{
            content: "";
            position: absolute;
            top: -50px;
            left: 100px;
            background: transparent;
             0;
            height: 100px;
            border-bottom: 50px solid transparent;
            border-left: 100px solid green;
            border-top: 50px solid transparent;
            float: left;
            position: relative;
            box-sizing: border-box;
        }

        .div2{
            background: transparent;
             80px;
            height: 0;
            border-bottom: 50px solid green;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            float: left;
            position: relative;
            box-sizing: border-box;
            margin-left: 100px;
        }
        .div2::after{
            content: "";
            position: absolute;
            top: 50px;
            left: -40px;
             80px;
            height: 0;
            border-top: 50px solid green;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            box-sizing: border-box;
        }
        .div5{
             100px;
            height: 0;
            border-bottom: 100px solid green;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            float: left;
        }
        .div6{
             100px;
            height: 0;
            border-bottom: 100px solid green;
            border-right: 40px solid transparent;
            float: left;
        }
        .div7{
             100px;
            height: 100px;
            background: green;
            transform: skew(30deg,0);
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>菱形</h4>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
    <div class="container">
        <h4>梯形和平行四边形</h4>
        <div class="div5">等腰</div>
        <div class="div6">直角</div>
        <div class="div7">平行四边形</div>
    </div>
</body>
</html>
    复制代码

    四、圆和椭圆

    　　

    复制代码
    <!DOCTYPE html>
<html>
<head>
    <title>圆和椭圆</title>
    <style type="text/css">
        .div1{
             50px;
            height: 50px;
            border-radius: 25px;
            box-sizing: border-box;
            background: red;
            float: left;
        }
        .div2 {
             100px; 
            height: 80px; 
            background: green; 
            border-radius: 50px / 40px; 
            float: left;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>
    复制代码

    　　科普一下：http://www.css88.com/book/css/properties/border/border-radius.htm

          

    　　以前都只用一个参参数的，所以写博客可以帮助查漏补缺。

    五、复杂一点的图形

    　　1、正多边形

    　　

    复制代码
    <!DOCTYPE html>
<html>
<head>
    <title>正多边形</title>
    <style type="text/css">
        .five {   
            top: 50px;
            position: relative;  
             54px;     
            border- 50px 18px 0;     
            border-style: solid;     
            border-color: red transparent; 
        } 
        .five::before {     
            content: "";     
            position: absolute;     
            height: 0;    
             0;     
            top: -85px;     
            left: -18px;     
            border- 0 45px 35px;     
            border-style: solid;     
            border-color: transparent transparent green; 
        }
        .six{
             100px;
            height: 0px;
            border-0px 18.59px 60px;
            border-style: solid;
            border-color: transparent transparent red; 
            margin-top: 60px;
            position: relative;
        }
        .six::after{
            content: "";
             100px;
            height: 0px;
            border-60px 18.59px 0px;
            border-style: solid;
            border-color: green transparent transparent; 
            position: absolute;
            top: 60px;
            left: -18.59px;
        }
    </style>
</head>
<body>
    <div class="five"></div>
    <div class="six"></div>
</body>
</html>
    复制代码

    　　

    　　正五边形是借鉴的大神的（不知道是不是正的，我没算），思路是做一个梯形，然后拼接一个三角形，正六边形是我根据他的思路用两个梯形拼接的，如果我没有计算错误这应该是一个正六边形（怎么有点不像呢），计算目的是保证，腰和短底长相等。我刻意用不同颜色表示了拆分情况，便于理解。正 八变形怎么做？只需要拆解成两个梯形和一个矩形就好做了。正n边形怎么做，也是把它看作基本图形的组合，只不过可能单靠两个伪元素已经不够用了。

    　　2、大大的爱心送给你

    　　

    复制代码
    .aixin{
            border- 200px 150px 0;
            border-style: solid;;
            border-color: red transparent;
             0px;
            position: relative;
            top: 200px;
            left: 100px;
        }
        .aixin::before{
            content: "";
             180px;
            height: 180px;
            display: block;
            border-radius: 90px;
            background: red;
            position: absolute;
            top: -357px;
            left: -180px;
        }
        .aixin:after{
            content: "";
             180px;
            height: 180px;
            display: block;
            border-radius: 90px;
            background: red;
            position: absolute;
            top: -357px;
            left: 0;
        }
    复制代码

    　　数据没算，调整出来的。人要实心啊，搞个空心太不像话了，你自己去弄吧。两个圈圈加个三角形就可以了，原来爱这么简单。　　　　

    　　3、对话框

    　　

    复制代码
    <!DOCTYPE html>
<html>
<head>
    <title>对话框</title>
    <style type="text/css">
        .div1{
             300px;
            height: 100px;
            border: 1px solid #97FFFF;
            position: relative;
            left: 100px;
            border-radius: 10px;
        }
        .div1::after,.div1::before{
            content: "";
            
            display: block;
             0;
            height: 0;
            border-style: solid;
            border-color:transparent #97FFFF transparent transparent;
            position: absolute;
            top: 30px;
            left: -50px;
        }
        .div1::after{
            border- 21px 50px 21px 0;
        }
        .div1::before{
            top: 31px;
            border- 20px 50px 20px 0;
            border-color: transparent white transparent transparent;
            z-index: 1000;
            left: -49px;
        }
        
        .div2{
             300px;
            height: 100px;
            border: 1px solid #97FFFF;
            position: relative;
            left: 100px;
            border-radius: 10px;
            margin-top: 20px;
        }
        .div2::after,.div2::before{
            content: "";
            
            display: block;
             0;
            height: 0;
            border-style: solid;
            border-color:transparent transparent transparent #97FFFF;
            position: absolute;
            top: 30px;
            left: 300px;
        }
        .div2::after{
            border- 21px 0px 21px 50px;
        }
        .div2::before{
            top: 31px;
            border- 20px 0px 20px 50px;
            border-color: transparent transparent transparent white;
            z-index: 1000;
            left: 299px;
        }
        
    </style>
</head>
<body>
    <div class="div1">    
    </div>
    

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

</body>
</html>
    复制代码

    　　

    六、小结一下

    　　用CSS还是画出来很多东西的，对于稍微复杂点的图形用拼接或者裁剪的方法实现，有时可能会需要一些简单计算。本文所提到的只是九牛一毛，早有一些朋友做出了许多非常炫酷的图形，你可以去搜搜看。就写到这里，留几个大神的作品，以备不时只需。
  • 相关阅读:
    微人事项目-mybatis-持久层
    通过外键连接多个表
    springioc
    Redis 消息中间件 ServiceStack.Redis 轻量级
    深度数据对接 链接服务器 数据传输
    sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取
    sqlserver 索引优化 CPU占用过高 执行分析 服务器检查
    sql server 远程备份 bak 删除
    冒泡排序
    多线程 异步 beginInvoke EndInvoke 使用
  • 原文地址：https://www.cnblogs.com/libin-1/p/6801566.html
Copyright © 2011-2022 走看看