Heim > Web-Frontend > HTML-Tutorial > css实现基础几何图形_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:38:26
Original
1538 Leute haben es durchsucht

  我们知道,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;}
Nach dem Login kopieren

下面我们结合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);}
Nach dem Login kopieren

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

#div_Trapezoid{    width:25px;    height:0;    border-bottom:50px solid #abc;    border-left:50px solid #fff;    border-right:50px solid #fff;}
Nach dem Login kopieren

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

#div_Parallelogram{    width:200px;    height:100px;    transform:skew(30deg);}
Nach dem Login kopieren

正方形通过旋转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;}
Nach dem Login kopieren

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

#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;}
Nach dem Login kopieren

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

#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;}
Nach dem Login kopieren

实现一个小房子:

#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;}
Nach dem Login kopieren

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

#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%;}
Nach dem Login kopieren

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

#moon{    background-color: #fff;    width:80px;    height:80px;    border-radius:50%;    box-shadow: 15px 15px 0 0 #abc;}
Nach dem Login kopieren

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

#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;}
Nach dem Login kopieren

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

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

#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%;}
Nach dem Login kopieren

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

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage