标签：
如何利用CSS实现各种几何图形形状效果:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
大家都知道CSS具有强大的功能，能够让页面变得美观靓丽，随着CSS的版本的提高，功能也越来越强大，下面简单介绍一下如何使用CSS实现各种几何图形效果。
一.实现正方形:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .mytest{ width:100px; height:100px; background-color:green; } </style> </head> <body> <div class="mytest"></div> </body> </html>
二.实现矩形:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .mytest{ width:150px; height:100px; background-color:green; } </style> </head> <body> <div class="mytest"></div> </body> </html>
三.实现圆形:
IE8和IE8以下的浏览器不支持。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .mytest{ width:100px; height:100px; background:green; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; } </style> </head> <body> <div class="mytest"></div> </body> </html>
四.实现椭圆形:
IE8和IE8以下的浏览器不支持。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .mytest{ width:200px; height:100px; background:green; -moz-border-radius:100px / 50px; -webkit-border-radius:100px / 50px; border-radius:100px / 50px; } </style> </head> <body> <div class="mytest"></div> </body> </html>
五.实现三角形:
以下代码可以根据实际需要设置其他方向的角北京色为白色，就可以实现某一方向为三角形。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .mytest{ width:0px; height:0px; border-left:100px solid green; border-right:100px solid black; border-bottom:100px solid red; border-top:100px solid blue; } </style> </head> <body> <div class="mytest"></div> </body> </html>
六.平行四边形:
IE8和IE8以下的浏览器不支持。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .mytest{ width:150px; height:100px; margin-left:20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background:green; } </style> </head> <body> <div class="mytest"></div> </body> </html>
七.鸡蛋形状:
IE8和IE8以下的浏览器不支持。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .mytest{ display:block; width:126px; height:180px; background-color:green; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; } </style> </head> <body> <div class="mytest"></div> </body> </html>
八.提示框:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .parent{ width:300px; height:100px; margin:40px auto; background-color:green; position:relative; } .square{ width:0px; height:0px; border-bottom:10px solid white; border-left:10px solid white; border-right:10px solid green; border-top:10px solid green; position:absolute; left:-20px; top:10px; } </style> </head> <body> <div class="parent"> <div class="square"></div> </div> </body> </html>
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/591.html
最原始地址是:http://www.softwhy.com/
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/4654418.html
