如何利用CSS实现各种几何图形形状效果_html/css

如何利用CSS实现各种几何图形形状效果_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:40:55

原创

1615人浏览过

如何利用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/