【css 画基本图形】的更多相关文章

用CSS画基本图形

用CSS画基本图形 1.正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 代码如下:   #rectangle { width: 200px; height: 100px; background: red; } 3.圆形 代码如下:   #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px;…

CSS学习笔记二：css 画立体图形

继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: rotate:rotateX() rotateY()  rotateZ()   :这个属性能够实现翻转效果 translate:translateX translateY() translateZ() :这个属性是实现移动效果 origin: 是设立为中心 perspective: 是影响3D的视觉…

css 画基本图形

抄于http://dongtianee.sinaapp.com/demo9.html /****************************************************************************************/ <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>CSS…

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

本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录的问题吧.一,css画特殊图形. 在网页中,需要一些特殊图形时.比如半圆形,三角形等,我们一般是让ui切图,但是实际上,利用css的边框 (border)属性,我们可以绘制一些有规律的图形. 盒模型中元素有四个角,那么每个角就存在一个弧度的属性. 先看代码: .half_circle{ width:…

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

本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录的问题吧.一,css画特殊图形. 在网页中,需要一些特殊图形时.比如半圆形,三角形等,我们一般是让ui切图,但是实际上,利用css的边框 (border)属性,我们可以绘制一些有规律的图形. 盒模型中元素有四个角,那么每个角就存在一个弧度的属性. 先看代码: .half_circle{ width:…

CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果:   CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red;…

纯CSS画的基本图形

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果:   CSS代码如下:   代码如下: #square { width: 100px; height: 100px; background: red; }…

用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. border:100px solid transparent //边框100px,实线,透明颜色,下面三行代码…

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标. 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形. 1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过设置 border 来实现: 2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上.右.下.左.上…

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行…