// 圓 寬高相等， border-radius大於寬度的一半
.circle
// 左半圓 寬度是高度的一半，左上，左下border-radius是高度的一半
.circle-half-left
// 右半圓 寬度是高度的一半，右上，右下border-radius是高度的一半
.circle-half-right
// 上半圓 高度是寬度的一半，左上，右上border-radius是寬度的一半
.circle-half-top
// 下半圓 高度是寬度的一半，左下，右下border-radius是寬度的一半
.circle-half-bottom
// leaf1 寬高相等
.leaf1-left
.leaf1-right
// leaf1 寬高不等
// 上三角 左右邊框透明，下邊框不透明
.********-up
// 下三角 左右邊框透明，上邊框不透明
.********-down
// 左三角 上下邊框透明，右邊框不透明
.********-left
// 右三角 上下邊框透明，左邊框不透明
.********-right
CSS畫圓和三角形
正圓半圓 四分之一圓 上三角形 畫圓就用 border radius 上 右 下 左 把圓水平垂直平均分四等分，從左上角開始順時針依次為上 右 下 左，想要哪邊的圓就設定對應位置的半徑，還能畫出圓角矩形啥的 畫三角形就用 border top 長度 邊框樣式 顏色。如上圖正方形，獎正方形對角線平均分...
用CSS繪製三角形
歸根結底，用css繪製三角形，就是利用邊框 border 特性進行繪製 平時我們用border可能用的很多，但是一般都會統一設定所有邊框的顏色，很少研究每個方向的邊框具體樣式是怎樣的。現在先來看乙個簡單的例子，我們分別設定每個方向的邊框的顏色，元素寬高是100px 效果 那麼，如果把元素的寬高設定為...
用css製作三角形
用css製作三角形，主要是利用css元素給 盒模型 設定邊框得到的。上圖，上邊框和做邊框，以及上邊框和右邊框的交合處，瀏覽器會按照直角的二分之一處繪製交合線。這是 盒模型 有寬和高時候的效果。我們假設一下，如果把寬和高設定成0px，同時讓邊框的寬度更寬一點情況會怎樣那？css 如下 tip1效果圖如...