您现在的位置是:首页 > 学无止境> CSS3|HTML5网站首页学无止境CSS3|HTML5

CSS写三角形

css   三角形  
简介CSS写三角形

<!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=gb2312″ />
<title>CSS写三角形</title>
</head>

<body>
<style>
/*css写三角*/
/*正三角*/
.sanjiaoxing{ width:0; height:0; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:100px solid #F03;}
/*倒三角*/
.sanjiaoxing_d{ width:0; height:0; border-left:100px solid transparent; border-right:100px solid transparent; border-top:100px solid #F03;}
/*倒三角*/
.sanjiaoxing_l{ width:0; height:0; border-bottom:100px solid transparent; border-right:100px solid #F03; border-top:100px solid transparent;}
/*倒三角*/
.sanjiaoxing_r{ width:0; height:0; border-left:100px solid #F03; border-bottom:100px solid transparent; border-top:100px solid transparent;}

/*方形+三角*/
.zhuixing{ width:30px; height:20px; position:relative; background:#0F9;}
.zhuixing:before{ content:””; position:absolute; right:-10px; top:0px; border-left:10px solid #0F9; border-top:10px solid transparent; border-bottom:10px solid transparent;}

span{ padding:2px 10px; position:relative; background:#0F9;}
span:before{ content:””; position:absolute; right:-10px; top:0px; border-left:10px solid #0F9; border-top:10px solid transparent; border-bottom:10px solid transparent;}
</style>

<div class=”sanjiaoxing”></div>
<hr />
<div class=”sanjiaoxing_d”></div>
<hr />
<div class=”sanjiaoxing_l”></div>
<hr />
<div class=”sanjiaoxing_r”></div>
<hr />
<div class=”zhuixing”></div>
<hr />
<span></span>
</body>
</html>


Top