<!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. [转] eclipse SVN中文件修改后图标不变黑星解决

    原文地址:http://blog.csdn.net/luwei42768/article/details/39225641 版权声明:本文为博主原创文章,未经博主允许不得转载. 如上图, 如果文件修改 ...

  2. vector迭代器用法

    #include<iostream> #include<vector> using namespace std; int main() { vector<int> ...

  3. C#-WebForm-★内置对象简介★Request-获取请求对象、Response相应请求对象、Session全局变量（私有）、Cookie全局变量（私有）、Application全局公共变量、ViewState

    内置对象: 1.Request - 获取请求对象 用法:接收传值 protected void Page_Load(object sender, EventArgs e) { TextBox1.Tex ...

  4. Android 轮换控件

    首先是控件轮换 一.创建主布局 1.用到的控件是 TextSwitcher (文本轮换) 那么其他对应的也就是 ImageSwitcher (图片轮换) <LinearLayout xmlns: ...

  5. <Script>放置位置

    html文件是自上而下的执行方式 css引入执行加载时,程序仍然往下执行 script脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行 页面效果实现类的js放在body之前,动作, ...

  6. ajex请求的数据 什么时候需用Json.parse()

    ajex请求的数据 什么时候需用 Json.parse()

  7. 用pyspider爬淘宝MM照片

    #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2016-12-09 15:24:54 # Project: taobaomm ...

  8. Netty 系列之 Netty 高性能之道

    1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友通过私信告诉我,通过使用 Netty4 + Thrift 压缩二进制编解码技术,他们实现了 10 W TPS(1 K 的复杂 POJO 对象)的跨 ...

  9. 【Beta】Scrum06

    Info 时间:2016.12.15 21:35 时长:25min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.17 21:30 Task Report Name ...

  10. 五、基于hadoop的nginx访问日志分析--userAgent和spider

    useragent: 代码(不包含蜘蛛): # cat top_10_useragent.py #!/usr/bin/env python # coding=utf-8 from mrjob.job ...