CSS各种图形绘制

最新推荐文章于 2022-09-08 14:06:39 发布

风火程序员

最新推荐文章于 2022-09-08 14:06:39 发布

阅读量1.2k

点赞数 1

分类专栏： css 文章标签： css绘图

本文链接：https://blog.csdn.net/phpfenghuo/article/details/38025119

版权

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="UTF-8">  
    <title>绘图</title>  
    <style type="text/css">  
      
    div{  
       background:black;  
    }  
      
    /*绘正方形*/  
    .square{  
       width:100px;  
       height:100px;  
    }  
      
    /*绘长方形*/  
    .retangle{  
      width:200px;  
      height:100px;  
    }  
      
    /*绘图形*/  
    .cirecle{  
       width:100px;  
       height:100px;  
       border-radius:50px;   /*把边框设置为圆角*/  
    }  
      
    /*图柱形*/  
    .cylinder{  
      width:100px;  
      height:100px;  
      border-radius:100px/50px;  
    }  
    /*椭圆形*/  
    .oval{  
      width:200px;  
      height:100px;  
      border-radius:100px/50px;  
    }  
    /*上三角形*/  
    .tirangle-up{  
       width:0px;  
       height:0px;  
       border-left:50px solid transparent;  
       border-right:50px solid transparent;  
       border-bottom:100px solid red;  
    }  
    /*下三角形*/  
    .tirangle-down{  
       width:0px;  
       height:0px;  
       border-left:50px solid transparent;  
       border-right:50px solid transparent;  
       border-top:100px solid red;  
    }  
      
    /*平边三角形*/  
    .tirangle-equal{  
       width:0px;  
       height:0px;  
       border-left:50px solid transparent;  
       border-right:50px solid transparent;  
       border-bottom:50px solid red;  
    }  
    /*左边三角形*/  
    .tirangle-left{  
       width:0px;  
       height:0px;  
       border-top:50px solid transparent;  
       border-right:100px solid red;  
       border-bottom:50px solid transparent;  
    }  
    /*右边三角形*/  
    .tirangle-right{  
       width:0px;  
       height:0px;  
       border-top:50px solid transparent;  
       border-left:100px solid red;  
       border-bottom:50px solid transparent;  
    }  
    /*左上三角形*/  
    .tirangle-left-up{  
       width:0px;  
       height:0px;  
       border-top:100px solid red;  
       border-right:200px solid transparent;  
      
    }  
    /*右上三角形*/  
    .tirangle-right-up{  
       width:0px;  
       height:0px;  
       border-top:100px solid red;  
       border-left:200px solid transparent;  
      
    }  
    /*左下三角形*/  
    .tirangle-left-down{