如何利用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/
时间： 2024-10-08 08:08:20