首頁 > web前端 > html教學 > css实现基础几何图形_html/css_WEB-ITnose

css实现基础几何图形_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:38:26
原創
1538 人瀏覽過

  我们知道,css3通过border-radius、animation、transform等“新”特性可以绘制很多精致的图形。比如腾讯企鹅Logo、超能陆战队中的大白机器人、太阳系、小黄人、叮当猫、安卓机器人、苹果图标等等。

  这些图形看似实现起来挺复杂,但它们通常都是由矩形、圆形、椭圆、三角、梯形等基本图形组合而成的。所以我们先从基本图形入手,等熟悉之后,实现复杂图形就成为可能了。

 

  首先从矩形开始,一个具有宽高属性的元素,设置其宽高值、块状显示,即得到一个矩形。

 

  在矩形的基础上通过设置border-radius,可以得到圆角矩形、圆形(当矩形为正方形且四个角的border-radius设为正方形宽度的一半时)和椭圆(当矩形的四个角的border-radius设为50%时)。

 

  下面实现三角形。我们看border属性,当有相邻border时,相邻border相接的部分是矩形的直角,为了形成一个直角,相邻border各贡献一个直角三角形,组成了矩形的直角,而这个直角三角形的直角边边长就是border的宽度。所以我们只要将其中一个border颜色设为transparent或当前背景色,视觉效果就是一个三角形了。见代码:

  

#div_RightAngle1{ //直角三角形1    width:0;    height:0;    border-width:30px;    border-style:solid;    border-top-color:#abc;    border-right-color:#abc;    border-bottom-color:#fff;    border-left-color:#fff;}#div_RightAngle2{ //直角三角形2    width:0;    height:0;    border-width:30px;    border-style:solid;    border-color:#fff;    border-top-color:#abc;}#div_anyAngle{ //任意三角形    width:0;    height:0;    border-left:25px solid #fff;    border-right:25px solid #fff;    border-bottom: 50px solid #abc;}
登入後複製

下面我们结合border与transform实现一个有趣的弯曲箭头,效果图是这样的:。先构造一个直角三角形div,通过transform旋转一定角度,然后使用after伪类通过圆角制造一个弯曲效果。见代码:

#divArrow{ //弯曲箭头    position: relative;    width:0;    height:0;    border-top:9px solid transparent;    border-right:9px solid red;    transform:rotate(10deg);}#divArrow:after{    position:absolute;    content:"";    border-top:3px solid red;    border-radius:15px 0 0 0;    top:-12px;    left:-9px;    width:12px;    height:12px;    transform:rotate(45deg);}
登入後複製

接下来实现梯形。前面我们已经知道通过设置宽高均为0、三边有边框且其中一边有可见色的方式可以构建出一个直角三角形,那么我们让元素具有宽度,就可以把相邻的边框给撑开,这样元素内部就形成一个矩形了,如此,梯形就构建出来了,见代码:

#div_Trapezoid{    width:25px;    height:0;    border-bottom:50px solid #abc;    border-left:50px solid #fff;    border-right:50px solid #fff;}
登入後複製

实现弯曲箭头的时候我们用到了transform,通过它我们也可以实现平行四边形,见代码:

#div_Parallelogram{    width:200px;    height:100px;    transform:skew(30deg);}
登入後複製

正方形通过旋转45度可以实现菱形,同样,我们也可以用实现三角形的思想来实现(用两个直角三角形拼起来):

#diamond1{    width:20px;    height:20px;    transform:rotate(45deg);}#diamond2{    width:0;    height:0;    border: 25px solid #fff;    border-bottom-color:#abc;    position:relative;}#diamond2:after{    position: absolute;    content:"";    left:-25px;    top:25px;    width:0;    height:0;    border: 25px solid #fff;    border-top-color:#abc;}
登入後複製

接下来,我们对菱形进行变形,实现一个盾牌效果:

#diamond_Shield{    width:0;    height:0;    border:50px solid #fff;    border-bottom: 20px solid #abc;    position:relative;}#diamond_Shield:after{    position: absolute;    content:"";    top:20px;    left:-50px;    width:0;    height:0;    border:50px solid #fff;    border-top: 70px solid #abc;}
登入後複製

接下来在菱形和梯形的基础上实现钻石形状:

#diamond3{    width:50px;    height:0;    position: relative;    border-style: solid;    border-color:#fff #fff #abc #fff;    border-width: 0 25px 25px 25px;}#diamond3:after{    position: absolute;    content:"";    top:25px;    left:-25px;    width:0;    height:0;    border-style: solid;    border-color: #abc #fff #fff #fff;    border-width: 70px 50px 0 50px;}
登入後複製

实现一个小房子:

#house{    background-color: #abc;    height:55px;    width:100px;    position:relative;}#house:before{    content:"";    position:absolute;    height:0;    width:0;    left:0;    top:-35px;    border-bottom: 35px solid #abc;    border-left: 50px solid #fff;    border-right: 50px solid #fff;}
登入後複製

在三角形的基础上,我们让其中一边成弧形,就形成一个扇形了:

#cone{    background-color: #fff;    width:0;    height:0;    border-left: 70px solid transparent;    border-right: 70px solid transparent;    border-top: 100px solid #abc;    border-radius:50%;}
登入後複製

如果我们想要实现一个月牙形呢?因为月牙是由两条弧线组成的,每个弧线可以看成一个圆的一部分弧长,所以我们在圆的基础上让圆有一个阴影就能实现了:

#moon{    background-color: #fff;    width:80px;    height:80px;    border-radius:50%;    box-shadow: 15px 15px 0 0 #abc;}
登入後複製

三角形和梯形可以拼成一个五边形,下面我们来实现之:

#pentagon{    background-color: #fff;    position: relative;    width:54px;    border-width: 50px 18px 0;    border-style:soild;    border-color: #abc transparent;}#pentagon:after{    content:"";    position:absolute;    height:0;    width:0;    top: -85px;    left:-18px;    border-width: 0 45px 35px;    border-style: solid;    border-color: transparent transparent #abc;}
登入後複製

六边形可以用两个三角形和一个矩形拼成、八边形可以用两个梯形和一个矩形拼成,还有五角星可以用两个梯形加一个三角形通过旋转组合实现,这里就不演示了。

明天是七夕,最后我们实现一个心形吧,愿天下有情人终成眷属:

#heart{    width:0;    height:0;    position:relative;}#heart:before,#heart:after{    position: absolute;    content:"";    left:50px;    top:0;    width: 50px;    height:80px;    background: red;    border-radius: 50px 50px 0 0;    transform: rotate(-45deg);    transform-origin: 0 100%;}#heart:after{    left:0;    transform:rotate(45deg);    transform-origin:100% 100%;}
登入後複製

(因为只是演示,所以以上样式均没加浏览器厂商前缀)

通过这些基本图形的实现,以后实现复杂图形就有一定的可能性了。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板