1.  
  2. /*1.正方形*/
  1. <div id="square"></div>
  1. #square {
        width: 100px;
        height: 100px;
        background: red;
    }

  1. /*2.长方形*/
  1. <div id="rectangle"></div>
  1. #rectangle {
        width: 200px;
        height: 100px;
        background: red;
    }

  1. /*3.左上三角*/
  2.  
  3. <div id="triangle-topleft"></div>
  4.  
  5. #triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }

  1. /*4.右上三角*/
  2.  
  3. <div id="triangle-topright"></div>
  4.  
  5. #triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }

  1. /*5.左下三角*/
  2.  
  3. <div id="triangle-bottomleft"></div>
  4.  
  5. #triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }

  1. /*6.右下三角*/
  2.  
  3. <div id="triangle-bottomright"></div>
  4.  
  5. #triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }

  1. /*7.平行四边形*/
  2.  
  3. <div id="parallelogram"></div>
  4.  
  5. #parallelogram {
        width: 150px;
        height: 100px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        background: red;
    }

  1. /*8.梯形*/
  2.  
  3. <div id="trapezoid"></div>
  4.  
  5. #trapezoid {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }

  1. /*9.六角星*/
  2.  
  3. <div id="star-six"></div>
  4.  
  5. #star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
    }
  6.  
  7. #star-six:after {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }

  1. /*10.五角星*/
  2.  
  3. <div id="star-five"></div>
  4.  
  5. #star-five {
        margin: 50px 0;
        position: relative;
        display: block;
        color: red;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid red;
        border-left: 100px solid transparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
  6.  
  7. #star-five:before {
        border-bottom: 80px solid red;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        position: absolute;
        height: 0;
        width: 0;
        top: -45px;
        left: -65px;
        display: block;
        content: '';
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
    #star-five:after {
        position: absolute;
        display: block;
        color: red;
        top: 3px;
        left: -105px;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid red;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        content: '';
    }

  1. /*11.五边形*/
  2.  
  3. <div id="pentagon"></div>
  4.  
  5. #pentagon {
        position: relative;
        width: 54px;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: red transparent;
    }
  6.  
  7. #pentagon:before {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent red;
    }

  1.  
  2. /*12.六边形*/
  1. <div id="hexagon"></div>
  1. #hexagon {
        width: 100px;
        height: 55px;
        background: red;
        position: relative;
    }
  2.  
  3. #hexagon:before {
        content: "";
        position: absolute;
        top: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid red;
    }
  4.  
  5. #hexagon:after {
        content: "";
        position: absolute;
        bottom: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid red;
    }

  1.  
  2. /*13.桃心*/
  3.  
  4. <div id="heart"></div>
  5.  
  6. #heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
  7.  
  8. #heart:before, #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

  1. /*14。无限大符号*/
  2.  
  3. <div id="infinity"></div>
  4.  
  5. #infinity {
        position: relative;
        width: 212px;
        height: 100px;
    }
  6.  
  7. #infinity:before, #infinity:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        border: 20px solid red;
        -moz-border-radius: 50px 50px 0 50px;
        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);
    }
    #infinity: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);
    }

  1. /*15.蛋*/
  2.  
  3. <div id="egg"></div>
  4.  
  5. #egg {
        display: block;
        width: 126px;
        height: 180px;
         padding: 0px; color: rgb(0, 128, 0); font-weight: bold;">red;
        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
        border-radius: 50% 50% 50% 50%  / 60% 60% 40% 40%;
    }

  1. /*16.提示对话框*/
  2.  
  3. <div id="talkbubble"></div>
  4.  
  5. #talkbubble {
        width: 120px;
        height: 80px;
        background: red;
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
  6.  
  7. #talkbubble:before {
        content: "";
        position: absolute;
        right: 100%;
        top: 26px;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-right: 26px solid red;
        border-bottom: 13px solid transparent;
    }

  1. /*17.十二角星*/
  2.  
  3. <div id="burst-12"></div>
  4.  
  5. #burst-12 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -o-transform: rotate(20deg);
        transform: rotate(20deg);
    }
  6.  
  7. #burst-12:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
        -webkit-transform: rotate(120deg);
        -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        -o-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    #burst-12:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
        -webkit-transform: rotate(150deg);
        -moz-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        -o-transform: rotate(150deg);
        transform: rotate(150deg);
    }

  1. /*18.八角星*/
  2.  
  3. <div id="burst-8"></div>
  4.  
  5. #burst-8 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -o-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    #burst-8:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

  1. /*19.钻石*/
  2.  
  3. <div id="cut-diamond"></div>
  4.  
  5. #cut-diamond {
        border-style: solid;
        border-color: transparent transparent red transparent;
        border-width: 0 25px 25px 25px;
        height: 0;
        width: 50px;
        position: relative;
    }
  6.  
  7. #cut-diamond:after {
        content: "";
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: red transparent transparent transparent;
        border-width: 70px 50px 0 50px;
    }

  1. /*20.阴阳鱼*/
  2.  
  3. <div id="yin-yang"></div>
  4.  
  5. #yin-yang {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }
  6.  
  7. #yin-yang:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid red;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
  8.  
  9. #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }

  1. /*21八边形*/
  2.  
  3. <div id="bagua"></div>
    #bagua {
        width: 100px;
        height: 240px;
        position: relative;
        background: red;
    }
  4.  
  5. #bagua:after, #bagua:before {
        position: absolute;
        top: 0;
        content: "";
        width: 0;
        height: 100px;
        border-top: 70px solid transparent;
        border-bottom: 70px solid transparent;
    }
  6.  
  7. #bagua:after {
        left: 100%;
        border-left: 70px solid red;
    }
  8.  
  9. #bagua:before {
        right: 100%;
        border-right: 70px solid red;
    }

css+div 绘制多边形的更多相关文章

  1. JS实现鼠标点击爱心&绘制多边形&每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

  2. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  3. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  4. 用线框模式绘制多边形 glPolygonMode

    glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glBegin(GL_TRIANGLES);//开始以g_ViewMode模式绘制 glColor3ub(182. ...

  5. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  7. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  8. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  9. CSS+DIV常用命名

    常用的符合CSS+DIV规则的命名 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单: ...

随机推荐

  1. 线上MySQL慢查询现象案例--Impossible WHERE noticed after reading const tables

    前言:2012年的笔记整理而得,发布个人博客,做备忘录使用. 背景:线上慢查询日志监控,得到如下的语句:       发现:select doc_text from t_wiki_doc_text w ...

  2. chrome js 获取css

    var myDiv = document.getElementById("chooseRect"); var computedStyle = document.defaultVie ...

  3. Spring MVC-静态页面示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_static_pages.htm 说明:示例基于Spring MVC 4.1.6. ...

  4. (hdu step 7.2.2)GCD Again(欧拉函数的简单应用——求[1,n)中与n不互质的元素的个数)

    题目: GCD Again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. poj2299--归并排序求逆序数

    /** \brief poj2299  *  * \param date 2014/8/5  * \param state AC  * \return memory 4640K time 3250ms ...

  6. 时间格式字符串转化为date和时间戳

    NSString *dateStr=@"2012-05-17 11:23:23"; NSLog(@"dateStr=%@",dateStr); NSDateFo ...

  7. 最长公共子序列 nlogn

    先来个板子 #include<bits/stdc++.h> using namespace std; , M = 1e6+, mod = 1e9+, inf = 1e9+; typedef ...

  8. luogu2508 [HAOI2008]圆上的整点

    题目大意 给出\(r\),求圆\(x^2+y^2=r^2\)上坐标均为整数的点数.\(n<=2,000,000,000\) 总体思路 我们看到这个数据大小,还是个数学题,想到这个的时间复杂度应当 ...

  9. ubuntu16.04安装chrome谷歌浏览器

    按下 Ctrl + Alt + t 键盘组合键,启动终端. 输入以下命令: sudo wget http://www.linuxidc.com/files/repo/google-chrome.lis ...

  10. bzoj1081: [SCOI2005]超级格雷码(dfs)

    1081: [SCOI2005]超级格雷码 题目:传送门 题解: 又是一道水题... 因为之前做过所以知道规律: 如n=2 B=3: 00 10 20    21 11 01    02 12 22 ...