CSS畫圓和三角形

2021-08-31 04:07:00 字數 400 閱讀 1706

正圓半圓

四分之一圓

上三角形

畫圓就用 border-radius:上 右 下 左

把圓水平垂直平均分四等分,從左上角開始順時針依次為上、右、下、左,

想要哪邊的圓就設定對應位置的半徑,還能畫出圓角矩形啥的

畫三角形就用 border-top:長度  邊框樣式 顏色。

如上圖正方形,獎正方形對角線平均分四等分,在頂部的就是top依次類推

想要朝哪的三角形,例如朝上,就把反方向bottom的設定為想要的高度(例如100px)、實線、顏色,其餘對立位置設定為想要高度的一半(50px)、實線、透明

css 用css畫圓,半圓和三角形

圓 寬高相等,border radius大於寬度的一半 circle 左半圓 寬度是高度的一半,左上,左下border radius是高度的一半 circle half left 右半圓 寬度是高度的一半,右上,右下border radius是高度的一半 circle half right 上半圓 ...

css繪製向左三角形 CSS繪製三角形

1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度,不知大家是否想乙個問題,相鄰的線條邊界在哪,下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...

css 修改三角形大小 css實現三角形

最近的乙個專案頁面中,有很多三角形icon,在不考慮ie相容性下,使用了css實現三角形,記錄一下 1 實心三角形,利用transparent實現 1 設定線條寬50px,div 寬高0 width 0px height 0px border right 100px solid red border...