CSS画图形,基本上所有的实现都是对边框的角度的调整及组合。

以下不包含兼容浏览器的前缀,请使用时在border-radius前加-moz-、-webkit- ....

1、正常得不得了的矩形

        .square{
width:200px;
height:100px;
background: red;
}

2、圆形,边宽为圆半径,4个扇形为一个圆,调整border-radius:50px 0 0 0;可得出不同方向的扇形

        /*圆形*/
.circle{
width:100px;
height:100px;
background: red;
border:1px solid red;
border-radius:50px;
}
/*半圆*/
.semicircle{
width:100px;
height:50px;
background: red;
border-radius: 100px 100px 0 0;
}
/*扇形*/
.fan{
width:50px;
height:50px;
background: red;
border-radius: 100px 0 0 0;
}
/*吃豆豆*/
.eatman{
width:;
height:;
border:50px solid red;
border-radius: 50px;
border-color:red transparent red red ;
}

3、椭圆形,水平半径100/垂直半径50

        .oval{
width:200px;
height:100px;
background: red;
border:1px solid red;
border-radius: 100px/50px;
}

4、三角形,设置了内容区高宽为0,就可以看到三角形,不同角度的三角形原理都是一样的,border-color顺序是:上右下左

       .triangle{
width:;
height:;
border:50px solid red;
border-color: transparent transparent red transparent;
}

5、平行四边形,利用的是transform的变形效果

        .parallelogram{
width: 150px;
height: 100px;
transform: skew(20deg);
background: red;
}

其他图形都是根据以上图形展开思维的...

CSS3:绘制图形的更多相关文章

  1. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  2. css3 绘制图形

    星形: .star-six { width:; height:; border-left: 50px solid transparent; border-right: 50px solid trans ...

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

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

  4. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  5. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

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

  6. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  7. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  8. CSS3绘制旋转的太极图案(一)

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  9. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  10. WPF2D绘制图形方法

    我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...

随机推荐

  1. HDFS之FileSystem

    package cn.hx.test; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.*; impo ...

  2. Spring发展史

    https://www.cnblogs.com/RunForLove/p/4641672.html

  3. 【BZOJ2039】【2009国家集训队】人员雇佣 [最小割]

    人员雇佣 Time Limit: 20 Sec  Memory Limit: 259 MB[Submit][Status][Discuss] Description 作为一个富有经营头脑的富翁,小L决 ...

  4. set .net principle

    var ticket = new FormsAuthenticationTicket(1, username, DateTime.Now, DateTime.Now.AddMinutes(FormsA ...

  5. 【洛谷】P1648 看守 (数学)

    题目链接 直接暴力搞\(O(n^2)\)显然是布星滴. 试想,若是一维,最远距离就是最大值减最小值. 现在推广到二维,因为有绝对值的存在,所以有四种情况 \((x1+y1) - (x2+y2), (x ...

  6. hdu 1509 Windows Message Queue (优先队列)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1509 题目大意:每一次输入都有序号和优先级,优先级小的先输出,优先级相同的话则序号小的先输出!第一次用 ...

  7. django中管理程序2

    升级版 from os import path TASKS_ROOT = path.dirname(path.abspath(path.dirname(__file__))) PYTHON_ROOT ...

  8. Django-内置Admin

    Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.contrib.contenttyp ...

  9. 利用cron监视后台进程状态

    利用cron监视后台进程状态 http://blog.csdn.net/dyx810601/article/details/72967758 1. 利用cron监视后台进程状态,如果进程死掉或服务器重 ...

  10. rhel5.5 linux系统下安装Oracle 11g

    一.配置环境变量1.我将环境变量配置写成了一个脚本,将这个脚本copy到一个新建的linux系统.(脚本是本人原创,前2篇文章里有,感兴趣的朋友可以去看看) 2.进入脚本所在的目录. 3.执行脚本,需 ...