<!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. http 413 wcf

    在网上搜到413的解决办法有多种,看具体项目找到对应的解决办法 如果是wcf返回的413,与serverRuntime无关,只要在Binding中设置最大接收值即可, <binding name ...

  2. Android SharedPreferences公共类sharedhelper

    SimpAndroidFarme是近期脑子突然发热想做的android快速开发的框架,目标是模块化 常用的控件,方便新手学习和使用.也欢迎老鸟来一起充实项目:项目地址 sharedpreference ...

  3. 在linux上如何通过composer安装yii

      Composer可以理解成一个依赖管理工具 它能解决以下问题 a) 你有一个项目依赖于若干个库. b) 其中一些库依赖于其他库. c) 你声明你所依赖的东西. d) Composer 会找出哪个版 ...

  4. How to Disable Strict SQL Mode in MySQL 5.7

    If your app was written for older versions of MySQL and is not compatible with strict SQL mode in My ...

  5. 测试ajax发送数据时在控制台看不到请求信息

    都是因为我把alert(xmlhttp);alert(url);打印测试数据放到了xmlhttp.open("GET",url,true);之前,导致后面的发送请求不执行了!

  6. 2016第七季极客大挑战Writeup

    第一次接触CTF,只会做杂项和一点点Web题--因为时间比较仓促,写的比较简略.以后再写下工具使用什么的. 纯新手,啥都不会.处于瑟瑟发抖的状态. 一.MISC 1.签到题 直接填入题目所给的SYC{ ...

  7. 多视图学习利器----CCA（典型相关分析）及MATLAB实现

    Hello,我是你们人见人爱花见花开的小花.又和大家见面了,今天我们来聊一聊多视图学习利器------CCA. 一 典型相关分析的基本思想 当我们研究两个变量x和y之间的相关关系的时候,相关系数(相关 ...

  8. mysql 查询制定日期数据

    //获取昨天更新数据的条件date_sub(current_date(), interval 1 day) = from_unixtime(senddate, '%Y-%m-%d') 注释:date_ ...

  9. Mysql 常用 SQL 语句集锦

    Mysql 常用 SQL 语句集锦 基础篇 //查询时间,友好提示 $sql = "select date_format(create_time, '%Y-%m-%d') as day fr ...

  10. Html中的文本框和单选按钮

    Html中的文本框和单选按钮用来制作页面的登录注册使用.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...