<!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. Docker对于部署来说及其重要

    目前的IT环境发生了很大的变化,有big server到vm server到docker,一步步的敏捷快速,更加合理的利用硬件资源,分离不同环境带来的问题,简化部署. 2016过年的这几天就自学了一下 ...

  2. [HTML5] Blob对象

    写在前面 本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景. Blob对象 一直以来,JS都没有比较好的可以直接处理二进制的方法.而Blob的存在,允许我们可以通过JS直接操 ...

  3. oracleXE(oracle学习版)在windows的安装配置

    oracleXE其实安装基本就是一路下一步. 在安装前记得先把tomcat打开,不然oracleXE会占用8080端口且安装过程无法更改端口. 如果需要远程连接此oracle XE的话,要关闭这台电脑 ...

  4. iOS10权限设置问题以及xcdoe8更新细节问题

    <key>NSVideoSubscriberAccountUsageDescription</key> <string></string> <ke ...

  5. memcache占用CPU过高的解决办法

    Simon最近为公司服务器操碎了心 , 先是mysqld进程占用CPU过高 , 导致服务器性能变低 ,网站打开太慢.通过增加max_connections及table_cache解决了问题 ,随后发现 ...

  6. Python Day19

    Django Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessio ...

  7. ios开发之Info.plist文件相关配置

    前言:在iOS开发中有些情况下需要对Info.plist文件进行配置,以下介绍几种相关配置.以后遇到需要配置的再更新... 开发环境:swift3.0.1,Xcode8.1 一,项目中需要使用第三方字 ...

  8. @Column

    @Column标记表示所持久化属性所映射表中的字段,该注释的属性定义如下: @Target({METHOD, FIELD}) @Retention(RUNTIME) public @interface ...

  9. IRequiresSessionState接口控制

    刚刚接触.net web端的朋友都会被Session坑过,莫名其妙的不能读取Session数据,后来知道原来有IRequiresSessionState这个接口,不继承的就不能读取Session里面的 ...

  10. confirm对话框取消后阻止ajax操作、ajax做批量删除

    在做批量删除的时候,需要用confirm弹出一个提示框让用户确认是否删除,点击确定,执行操作,点击取消,取消操作.但是如果使用ajax把选中项的主键值传到处理页面处理时,如果使用下面的方法将confi ...