您當前位置：首頁 > web前端 > htmlcss > CSS實例：純CSS打造斜角

CSS實例：純CSS打造斜角

來源：程序員人生發布時間：2013-10-16 00:52:57 閱讀次數：10012次

　　關于CSS打造斜角，先說一下歷史，在CSS+DIV流行以前，也就是用表格作為網頁框架的時候，人們通過在一個單元格里加入一個斜角圖片來來做這種效果的。這種技術現在已經完全過時了，這里不討論。CSS+DIV興起以后，出現了兩種制作斜角效果的方法，一個是通過backgroud-image屬性添加斜角圖片作為背景，并且用padding屬性使內容縮進，不超出斜角的邊界。這種方法也不在這篇文章的討論范圍。

　　這次要說的是純CSS打造的斜角，也就是說完全不需要圖片。

　　相對于純CSS打造圓角，做斜角簡單多了。請看以下實例：

<head><style type="text/css">* {margin:0; padding:0; list-style:none;}#wrapper {height:0;width:0;border-top:20px solid red;border-right:20px solid blue;border-bottom:20px solid green;border-left:20px solid grey;}</style></head><body><div id="wrapper" ></div></body><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

　　運行后效果如下圖:

CSS斜角原理