效果圖 如何用css畫三角形? 1).利用css控制border的邊框屬性, 畫出四個小三角形 html代碼 css代碼 效果: 從css很容易看出來, div的邊框 b...
效果圖
如何用css畫三角形?
1).利用css控制border的邊框屬性, 畫出四個小三角形
html代碼
css代碼
效果:
從css很容易看出來, div的邊框 border-top, border-right, border-bottom, border-left (上右下左)這三個邊框, 都是梯形.
那麼, 如果梯形的上底無限接近0的時候, 是不是就越來越接近三角形?
如下:
當width = 200px, height = 200px 的時候,(width為中間白色矩形的寬, height為它的高)
當width = 150px, height = 150px 的時候,
當width = 100px, height = 100px 的時候,
當width = 50px, height = 50px 的時候,
當width = 25px, height = 25px 的時候,
當width = 5px, height = 5px 的時候,
最後, 當width = 0px, height = 0px 的時候,
2). 將不需要的三角形透明化
border-color有一取值: transparent (透明), 所以只需要把其他的三角形的border-color設置成 "transparent"就可以了.
html代碼
css代碼
效果:
註意:Internet Explorer 6（以及更早的版本）不支持屬性值 "transparent"。
在IE6中的效果:
將css改成:
border-color:transparent transparent transparent blue;
border-width:50px;
border-style:dashed dashed dashed solid;
在IE6中的效果:
聽了hinong兄弟的話, 加了 "overflow:hidden;", 在IE6顯示就正常了.
效果:
演示代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>new</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Akira.Juggling" />
<style>
div{
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
