<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style>

        div

        {

            width: 50px;

            height: 50px;

            background-color: red;

            margin: 5px;

            text-align:center;

            line-height: 50px;

        }

         /* border-radius4个参数 左上 右上 右下 左下(顺时针) */

        .box{border-radius: 50%;}

        .semi-circle{border-radius: 100px 100px 0 0;height: 50px;}

        .sector{border-radius: 100% 0 0 0;}

        /* -webkit-transform旋转 */

        .arc

        {

            border-radius: 100px 0 100px 0;

            -webkit-transform: rotate(45deg);

        }

        .triangle

        {

            background: none;

            width: 0;

            height: 0;

            border: 50px solid red;

            border-color: red transparent transparent transparent;/* transparent透明 */

        }

        .rectangle::first-letter{ color: white;}

        .rectangle

        {

          border-radius: 10px;

          position: relative;

        }

        /*子绝父相(子级绝对定位(absolute)父亲相对定位relative)*/

        .rectangle::before

        {

            width: 0;

            height: 0;

            border: 15px solid red;

            border-color: transparent transparent transparent green;

            content: "";

            position: absolute;

            right: -30px;

            top: 14px;

        }

        .heart{

          width: 60px;

          height: 80px;

          background: none;

           position: relative;

        }

       /*  before、after伪元素 (属于行内元素设置宽度和高度无效解决办法 absolute变成块级元素) */

        .heart::before, .heart::after

        {

            width: 100%;

            height: 100%;

            content: "";

            background-color: red;

            position: absolute;

            border-radius: 100px 100px 0 0;

            -webkit-transform: rotate(-45deg);

        }

        .heart::after

        {

         -webkit-transform: rotate(45deg);

         left: 46px;

        }

        .one,.two,.there

        {

            margin: 0;

            visibility: hidden;

        }

        .one

        {

            width: 80px;

            height: 100px;

            margin: 10px;

            background-color: red;

            -webkit-transform: rotate(120deg);

        }

        .two

        {

            width: 100%;

            height: 100%;

            background-color:royalblue;

            -webkit-transform: rotate(-60deg);

        }

        .there

        {

            width: 100%;

            height: 100%;

            background-color: yellow;

            -webkit-transform: rotate(-60deg);

            visibility: visible;

            background: url(b.jpg);

            background-size:contain;

        }

        .one,.two

        {

            overflow: hidden;

        }

    </style>

</head>

<body>

      <div>矩形</div>

      <div class="box">圆形</div>

      <div class="semi-circle">半圆</div>

      <div class="sector">扇形</div>

      <div class="arc">弧形</div>

      <div class="triangle">

      <p style="line-height: 15px;position: relative;top: -65px;left: -7px;">三角形</p>

      </div>

      <div class="rectangle">CSS3</div>

     <div class="heart"></div>

    <div class="one">

          <div class="two">

               <div class="there"></div>

          </div>

      </div>

</body>

</html>

运行结果

纯 CSS 绘制图形（心形、六边形等）的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS图形基础：纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  4. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  5. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  6. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  7. 史上最强大的40多个纯CSS绘制的图形[转]

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  8. 纯CSS绘制的图形一览

    整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭,哈哈...仅仅是为了自己以后查看! Square(正方形) #square { width: 100px; height: 100px; backg ...

  9. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. SpringMVC org.xml.sax.SAXParseException: cvc-complex-type.2.4.c 报错处理方式

    使用SpringMVC的过程中需要访问静态文件,即在spring-servlet.xml文件中添加了 <mvc:default-servlet-handler /> 标签,以开启Sprin ...

  2. tomcat7下对HTTPS的部署配置

    1.申请CA证书,可以在腾讯云或者阿里云申请到免费的CA,不过前提是,你要有太服务器和域名,并且解析过域名. 2.下载申请到的CA证书到本地,在tomcat7上进行相关配置. 3.Tomcat 证书部 ...

  3. 报错：MySQL check the manual that corresponds to your MySQL server version for the right syntax

    今天在向MySQL中插入数据时,报了标题的错误,因为我用的是session.save(object)方法,后台打印出的object和sql语句都没有问题,后来在网上查询,发现http://blog.c ...

  4. 【BZOJ-2938】病毒 Trie图 + 拓扑排序

    2938: [Poi2000]病毒 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 609  Solved: 318[Submit][Status][Di ...

  5. js修改伪类的值

    css文件 p.change:after { content: attr(data-content); } js文件 $(this).addClass('change').attr('data-con ...

  6. Linux服务器配置多台虚拟主机

    2016年11月4日15:59:12 LAMP环境 参考:http://blog.itblood.com/nginx-same-ip-multi-domain-configuration.html 在 ...

  7. 【原创】自己动手写工具----XSmartNote [Beta 3.0]

    一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...

  8. bat基础

    首先所有命令在cmd命令行中都能找到说明: 例如 想知道type用法 输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容 虽然有点鸡肋 1 ...

  9. Nuget Command Console

    Get-Package -ListAvailable -Filter contracts 命令行 注意选择 程序包源

  10. 关于elasticsearch和kibana的时区和日期问题

    elasticsearch原生支持date类型,json格式通过字符来表示date类型.所以在用json提交日期至elasticsearch的时候,es会隐式转换,把es认为是date类型的字符串直接 ...