css 三角形

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
body{text-align:center;}
.wrapper{margin:100px auto;width:960px;}

.sjx{margin-top:50px;}
.hd{position:relative;display:block;border:1px solid blue;width:50px;height:50px;background:red;}
.hd b{position:absolute;top:15px;right:5px;border-left:20px dashed transparent;border-right:20px dashed transparent;border-top:20px solid blue;font-size:0;width:0;height:0;}
.hd s{position:absolute;top:15px;right:9px;border-left:16px dashed transparent;border-right:16px dashed transparent;border-top:16px solid #fff;font-size:0;width:0;height:0;}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”sjx”>
<span class=”hd”>
<b></b>
<s></s>
</span>
</div>
</div>
</body>
</html>

Leave a Reply