<!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. mysq大数据分页

    mysql limit大数据量分页优化方法 Mysql的优化是非常重要的.其他最常用也最需要优化的就是limit.Mysql的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急 ...

  2. podfile The dependency `` is not used in any concrete target

    内容提要: podfile升级之后到最新版本,pod里的内容必须明确指出所用第三方库的target,否则会出现The dependency `` is not used in any concrete ...

  3. linux文件目录结构

    1./ 文件系统的入口,最高一级目录 2./bin 存放基础系统所需的命令 3./boot 包含Linux内核及系统引导程序所需要的文件 4./dev 设备文件存储目录(声卡.磁盘.分区..) 5./ ...

  4. Something Strange (to be completed)

    ~/.local/share/applications/swt.desktop [Desktop Entry] Encoding=UTF-8 Version=1.0 Type=Application ...

  5. Fixing DSDT

    https://clover-wiki.zetam.org/Fixing-DSDT#dsdt-mask_fixdisplay_0100-bit-8

  6. c#.net单例模式的学习记录！

    一. 单例(Singleton)模式 单例模式的特点: 单例类只能有一个实例. 单例类必须自己创建自己的唯一实例. 单例类必须给所有其它对象提供这一实例. 单例模式应用: 每台计算机可以有若干个打印机 ...

  7. Jmeter插件监控服务器性能

    处理利用jmeter实施监控压测时受压机的各项性能 操作步骤: 施压机上的jmeter/lib/ext中放入下载的插件包 jmeter-plugins-perfmon-2.1.jar 受压机上放入Se ...

  8. 测试数组push和unshift方法的效率

    先贴代码,之后再来补内容 <!DOCTYPE HTML> <html> <head> <title>测试数组push和unshift方法的效率</ ...

  9. Codis——分布式Redis服务的解决方案

    Codis——分布式Redis服务的解决方案 之前介绍过的 Twemproxy 是一种Redis代理,但它不支持集群的动态伸缩,而codis则支持动态的增减Redis节点:另外,官方的redis 3. ...

  10. SQL记录

    create table test( 教师号 integer , 星期一 integer null, 星期二 integer null, 星期三 integer null); insert into ...