利用div和css製作三角形效果

antzone發表於2017-03-11
CSS

本章節介紹一下如何利用div和css實現三角形效果，雖然看起來表神奇，但是原理是非常的簡單。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:0px;
  height:0px;
  border:40px solid white;
  border-top-color:#930;
  border-bottom-color:#0C3;
  border-left-color:#FC0;
  border-right-color:#009;
  line-height:0px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

其實這個三角形是利用div的邊框"擠出"來的，邊框由於採用了不同的顏色，所以很好區分，如果只保留一個方位的三角形，可以自行設定邊框顏色或者刪除邊框就可以了。

相關文章