目錄
一、圓html
css 效果
說明二、三角形
html
css 效果
說明
1、這裡使用的 div 元素，設定成 display: inline-block；
2、注意 width 和 height 要設定為 0。用 border 設定圓的半徑，示例中半徑是 30px；
3、border-radius: 50%; 將邊角設為四分之一的圓。設定為 60%、70%或100%；也和 50%一樣的效果。也就是說50%就是最大的邊角值。
tangle
1、這裡使用的 div 元素，設定成 display: inline-block；
2、注意 width 和 height 要設定為 0。用 border 設定三角形的高度，示例中高度是 30px 的直角三角形；
3、border-style: solid; 邊框設為實線；
4、border-color 是按照 上、右、下、左 的方式設定。下 為紅色，其它都設為透明。如果4個方向都設定顏色，如下圖所示。所以，如果你想要那個方向的三角形，透明其它方向即可；
border-color: black green red blue;
5、border-width 也是按照 上、右、下、左 的方式設定。4個方向的值一樣就是直角三角形。
如果是鈍角，設定小於其它值。
border-width: 30px 30px 20px 30px;
如果是銳角，設定大於其它值。
border-width: 30px 30px 50px 30px;
css border 畫三角形
前幾日在瀏覽 中無意發覺了人家用css來畫三角形，我覺得很有趣但不太會所以就問了一下師姐，發覺自己很無知，呵呵，原來很多人都是用這種方法畫三角形的，為什麼的，原因如下 1 一張小三角形的可能有幾百位元組，不過幾百位元組可以寫多少行 呢？2 太多會導致網頁載入得會很慢 先看 吧 html css bo...
CSS border實現三角形
css盒模型 乙個盒子包括 margin border padding content。上下左右邊框交界處出呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或者顏色可以得到小三角，小梯形等。調整寬度大小可以調節三角形形狀。示例1 一般情況下，我們設定盒子的寬高度及上下左右邊框，會呈現如下...
CSS border實現三角形
css盒模型 乙個盒子包括 margin border padding content。上下左右邊框交界處出呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或者顏色可以得到小三角，小梯形等。調整寬度大小可以調節三角形形狀。示例1 一般情況下，我們設定盒子的寬高度及上下左右邊框，會呈現如下...