基本图形包括:矩形、圆角矩形、圆形、椭圆形、三角形、值线、弧

这些图形的绘制用到了CSS圆角属性,不考虑IE8。

下面的实现在chrome浏览器运行通过。

1.矩形

比较简单,通过CSS设置宽度、高度、背景色即可。

html:

<div class="rectangle"></div>

css:

        .rectangle {
width: 150px;
height: 100px;
background-color: orangered;
}

呈现:

2.圆角矩形

在矩形设置的基础上,增加圆角属性设定,这里用的单位是百分比,好处是可适应整体大小的变化而变化。

html:

<div class='rounded-rectangle'></div>

css:

        .rounded-rectangle {
width: 150px;
height: 100px;
background-color: orangered;
border-radius: 10%;
}

呈现:

3.圆

设置为正方形,将圆角设成50%即可,其实就是圆角的半径为正方形的的半径。

html:

<div class='circle'></div>

css:

        .circle {
width: 100px;
height: 100px;
background-color: orangered;
border-radius: 50%;
}

呈现:

4.椭圆

在圆形的基础上,将正方形设置成矩形即可。

html:

<div class='ellipse'></div>

css:

        .ellipse {
width: 150px;
height: 100px;
background-color: orangered;
border-radius: 50%;
}

呈现:

5.三角形

乍一看三角形这个样子,还真是无从下手,没有什么现成的方法一步到位的完成,绘制它需要用到border的特性,这个很有意思。

html:

<div class='triangle'></div>

分解1

现在我们来看一下有趣的border,做一个正方形,宽高都设成100px,设定四个边的border的宽度为10px,每条边设置不同的颜色。

        .triangle{
width: 100px;
height: 100px;
border-style: solid;
background-color: orangered;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color:blueviolet;
border-top-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
border-right-width: 10px;
}

呈现后发现很有意思,两条border边的交界处是斜角边,

分解2

继续,将各条边的宽度放大,将正方形宽高都设成0px,将每条边的border的宽度都设成50px(原正方形宽度或高度的一半)

        .triangle{
width: 0px;
height: 0px;
border-style: solid;
background-color: orangered;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color:blueviolet;
border-top-width: 50px;
border-bottom-width: 50px;
border-left-width: 50px;
border-right-width: 50px;
}

是不是各个边都露出三角形了,要的形状就出来了,这就是有趣的border。

  

分解3

最后一步就简单了,把不需要的边都透明掉,只留下底边,并且透明掉背景。

        .triangle{
width: 0px;
height: 0px;
border-style: solid;
background-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: blue;
border-left-color:transparent;
border-top-width: 50px;
border-bottom-width: 50px;
border-left-width: 50px;
border-right-width: 50px;
}

透明掉各边和背景后,需要的三角形就出来了,很有趣。

如果要使他变成钝角,就把底边的宽度变小,如果是锐角,就增加宽度。

如果是直角,就把左或右border的宽度设成0px。

各种三角形可通过各边的宽度值的调整来实现。

6.直线

直线就比较简单,压缩高度或宽度就变成了直线。

html:

<div class='line'></div>

css:

        .line{
width: 100px;
height: 3px;
background-color: orangered;
}

呈现:

7.弧

本质上是利用圆角来实现,现在需要把矩形的左上角的圆角绘制成弧形,那么把右边和底边border的宽度设成0px,让他们不可见,设置左上角圆角的半径,让其变大,看得明显些,其余的圆角半径全都设成0px,这样一个弧形就完成了。

html:

<div class='arc'></div>

css:

        .arc {
width: 100px;
height: 100px;
border-style: solid;
border-top-width: 10px;
border-bottom-width: 0px;
border-left-width: 10px;
border-right-width: 0px;
border-top-color: blue;
border-bottom-color: red;
border-left-color: red;
border-right-color: red;
background-color: transparent;
border-top-right-radius: 0px;
border-top-left-radius: 100px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

呈现:

div+css3绘制基本图形的更多相关文章

  1. CSS3绘制特殊图形

  2. CSS3绘制不规则图形,代码收集

    三角形系列(三角形.倒三角.左三角.右三角.左上三角.右上三角.左下三角.右下三角) 主要用到的是:宽度高度设置为0, border的各个边的设置(各个边的透明或不透明): .triangle-up ...

  3. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...

  4. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  5. CSS3 绘制360安仔小精灵[原创]

    Css3图形通常由矩形,圆形,椭圆,三角形,梯形等组合而成. 矩形,为display:block的块级元素设定宽高,便能实现, 圆角矩形,椭圆,圆形,则通过border-radius 属性来得到. 圆 ...

  6. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  7. 一言不合敲代码(1)——DIV+CSS3制作哆啦A梦头像

    先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成 ...

  8. 使用 CSS3 绘制 Hello Kitty

    偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程.想要源码. ...

  9. CSS 魔法系列:纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. InnoDB体系结构学习笔记

    后台线程 Master Thread 核心的后台线程,主要负责将缓冲池的数据异步刷新到磁盘,保证数据的一致性,包括(脏页的刷新).合并插入缓冲.(UNDO页的回收)等 IO Thread 4个writ ...

  2. css实现单行,多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  3. 《Django By Example》第二章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译完第一章后,发现翻译第二章的速 ...

  4. bzoj3207--Hash+主席树

    题目大意: 给定一个n个数的序列和m个询问(n,m<=100000)和k,每个询问包含k+2个数字:l,r,b[1],b[2]...b[k],要求输出b[1]~b[k]在[l,r]中是否出现. ...

  5. Apache Cordova开发Android应用程序——番外篇

    很多天之前就安装了visual studio community 2015,今天闲着么事想试一下Apache Cordova,用它来开发跨平台App.在这之前需要配置N多东西,这里找到了一篇MS官方文 ...

  6. 数据库 DML、DDL、DCL区别 .

    总体解释: DML(data manipulation language): 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的 ...

  7. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

  8. 修改MySQL默认字符集编码

    好记心不如烂笔头,很多东西当时没记下来,过了就忘了,下次用到时又得浪费好多时间才能解决.今天又遇到修改MySQL默认字符集编码的问题,折腾了半天解决了,赶快记录下来,以后就不用每次折腾了. 查看MyS ...

  9. Performance Tuning

    本文译自Wikipedia的Performance tuning词条,原词条中的不少链接和扩展内容非常值得一读,翻译过程中暴露了个人工程学思想和英语水平的不足,翻译后的内容也失去很多准确性和丰富性,需 ...

  10. 如何使用RobotFramework编写好的测试用例

    如何使用Robot Framework编写优秀的测试用例 概述 命名 测试套件命名 测试用例命名 关键字命名 setup和teardown的命名 文档 测试套件文档 测试用例文档 用户关键字文档 测试 ...