• HTML/CSS

    css3实现不同方向的三角形

    by on 2011年06月21日

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>css3实现不同方向的三角形</title>
<style>
b { margin:10px;}
.triangle_top {border-color:transparent transparent #5A8AD8;border-style:solid;border-width:5px;font-size:0;}
.triangle_right {border-color:transparent transparent transparent #5A8AD8;border-style:solid;border-width:5px;font-size:0;}
.triangle_bottom {border-color:#5A8AD8 transparent transparent;border-style:solid;border-width:5px; font-size:0;}
.triangle_left {border-color:transparent #5A8AD8 transparent transparent;border-style:solid;border-width:5px;font-size:0;}
</style>
</head>
<body>
<b class=”triangle_top”></b>
<b class=”triangle_right”></b>
<b class=”triangle_bottom”></b>
<b class=”triangle_left”></b>

</body>
</html> 

其实这个也不算是CSS3特有的了,基本原理是利用css border的transparent来实现


查看demo