CSS畫出半圓,四分之一圓,三角等圖形
圓形
.icon{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}
半圓
.icon{
width: 100px;
height: 50px;
background: red;
border-radius: 100px 100px 0 0;
}
四分之一圓
.icon{
width: 50px;
height: 50px;
background: red;
border-radius: 100px 0 0 0;
}
原理:圓,半圓,四分之一圓的實現主要是 border-radius 屬性,設定不同方向的值
分別是 左上,右上,右下,左下
三角形
.icon{
border: 50px solid red;
width: 0;
height: 0;
border-color: red transparent transparent transparent
}
原理:border設定大一點,相當於設定了一個矩形,通過border-color設定顏色,不需要的方向則設定 transparent,也可以設定多個方向來實現不同圖形,四個方向都設定相當於矩形
border-color: red blue yellow green;
相關文章
- CSS魔法系列:純CSS繪製基本圖形(圓、橢圓等)CSS
- css實現圓形、橢圓和半圓效果程式碼例項CSS
- 純CSS畫的基本圖形(矩形、圓形、三角形、多邊形、愛心、八卦CSS
- CSS圓形圖片效果CSS
- CSS 繪製半圓CSS
- Python中OpenCV劃線、畫圓、橢圓、新增文字等幾何圖形繪製操作PythonOpenCV
- SVG畫圓形進度條SVG
- android圓形頭像的選擇和剪下並儲存出圓形圖片Android
- Glide實現圓角圖片,以及圓形圖片IDE
- css3 繪製畫圓、扇形CSSS3
- css底部帶有三角形箭頭的圓角矩形效果CSS
- Flutter 圓形/圓角頭像Flutter
- CSS不用背景圖片實現優惠券樣式反圓角,凹圓角,反向半圓角,並且背景漸變CSS
- Android Xfermode 實戰 實現圓形、圓角圖片Android
- 純css畫三角形CSS
- CSS3圓形漸隱漸現迴圈出現CSSS3
- CSS 奇思妙想 | 巧妙的實現帶圓角的三角形CSS
- 【液晶模組系列基礎視訊】4.1.X-GUI圖形介面庫-畫線畫圓等函式簡介GUI函式
- CSS3圓形進度條效果CSSS3
- 簡單的CSS圓形縮放動畫CSS動畫
- css繪製圓形程式碼例項CSS
- CGContextRef處理圓形圖片GCContext
- matlab練習程式(三角形外接圓)Matlab
- Android 圓角、圓形 ImageView 實現AndroidView
- 理解純CSS畫三角形CSS
- css 畫圖形大全CSS
- CSS3圓形時鐘效果程式碼CSSS3
- css3橢圓形程式碼例項CSSS3
- css3動態圓形鐘錶效果CSSS3
- 《Android開發卷——設定圓形頭像,Android擷取圓形圖片》Android
- [計算幾何]圓與三角形是否相交
- matlab練習程式(三角形內切圓)Matlab
- 微信小程式裁剪圖片成圓形微信小程式
- Android 繪圖和shape圓形Android繪圖
- BitmapShader繪製圓形圖片
- CSS小技巧——畫個三角形CSS
- 【譯】使用CSS Transitions實現圓形懸停效果CSS
- 如何用CSS製作一個圓形放大鏡CSS