<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS创建各种形状</title>
<style type="text/css">
div{ margin:30px;}
#square{ width:100px; height:100px; background:#F0F;}
#rectangle{ width:200px; height:100px; background:#f0f;}
#circle{ width:100px; height:100px; background:#f0f; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}
#oval{ width:200px; height:100px; background:#f0f; -moz-border-radius:100px/50px; -webkit-border-radius:100px/50px; border-radius:100px/50px;}
#triangle-up{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid #f0f;}
#triangle-down{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid #f0f;}
#triangle-left{ width:0; height:0; border-right:100px solid #f0f; border-top:50px solid transparent; border-bottom:50px solid transparent;}
</style>
</head>
<body>
<div id="square"></div>
<div id="rectangle"></div>
<div id="circle"></div>
<div id="oval"></div>
<div id="triangle-up"></div>
<div id="triangle-down"></div>
<div id="triangle-left"></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS创建各种形状</title>
<style type="text/css">
div{ margin:30px;}
#square{ width:100px; height:100px; background:#F0F;}
#rectangle{ width:200px; height:100px; background:#f0f;}
#circle{ width:100px; height:100px; background:#f0f; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}
#oval{ width:200px; height:100px; background:#f0f; -moz-border-radius:100px/50px; -webkit-border-radius:100px/50px; border-radius:100px/50px;}
#triangle-up{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid #f0f;}
#triangle-down{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid #f0f;}
#triangle-left{ width:0; height:0; border-right:100px solid #f0f; border-top:50px solid transparent; border-bottom:50px solid transparent;}
</style>
</head>
<body>
<div id="square"></div>
<div id="rectangle"></div>
<div id="circle"></div>
<div id="oval"></div>
<div id="triangle-up"></div>
<div id="triangle-down"></div>
<div id="triangle-left"></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
扫一扫
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
