摘要:我們在編寫前端代碼時,經常會遇到各種各樣的形狀圖形如邊框對話框,三角形,平行四邊形圓角邊框圓形四葉草花瓣等,除了用背景圖片雪碧圖或精靈圖定位引用和插入圖片的方法,我們還可以用邊框圓角漸變和定位的方法結合使用,繪制各種各樣的形狀圖形。
我們在編寫前端代碼時,經常會遇到各種各樣的形狀圖形(如:邊框對話框,三角形,平行四邊形、圓角邊框、圓形、四葉草、花瓣等),除了用背景圖片(css雪碧圖或css精靈圖+定位引用)和插入img圖片的方法,我們還可以用css邊框、圓角(border-radius)、漸變和定位的方法結合使用,繪制各種各樣的形狀圖形。
1、實心圓.circle { width: 120px; height: 120px; background: #317ef3; border-radius: 100%; }2、圓環(空心圓)
.ring { width: 120px; height: 120px; border: 10px solid #317ef3; border-radius: 100%; box-sizing: border-box; }3、半圓
//上半圓 .top-semicircle { width: 120px; height: 60px; background: #317ef3; border-radius: 60px 60px 0 0; /*順時針方向,四個值依次分別表示左上、右上、右下、左下*/ } //右半圓 .rt-semicircle { width: 60px; height: 120px; background: #317ef3; border-radius: 0 60px 60px 0; } //左半圓 .lf-semicircle { width: 60px; height: 120px; background: #317ef3; border-radius: 60px 0 0 60px; } //下半圓 .bot-semicircle { width: 120px; height: 60px; background: #317ef3; border-radius: 0 0 60px 60px; }四分之一圓(扇形)
.toplf-sector, .toprt-sector, .botlf-sector, .botrt-sector { width: 60px; height: 60px; background: #317ef3; } .toprt-sector { border-radius: 60px 0 0 0; } .toplf-sector { border-radius: 0 60px 0 0; } .botlf-sector { border-radius: 0 0 60px 0; } .botrt-sector { border-radius: 0 0 0 60px; }心形
.love { width: 100px; height: 100px; background: #317ef3; position: relative; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } .love::before,.love:after{ content: ""; background: #317ef3; position: absolute; } .love:after { width: 50px; height: 100px; background: #317ef3; border-radius: 50px 0 0 50px; right: 99px; top: 0; } .love::before { width: 100px; height: 50px; border-radius: 50px 50px 0 0; bottom: 99px; left: 0; }
原理圖奉上
.eat { width: 0; height: 0; border: 60px solid #317ef3; border-radius: 100%; border-right-color: transparent; }
值得注意的是如果右邊框的顏色設置為白色的話,右邊會有一條藍色線條
.egg { width: 100px; height: 150px; background: #317ef3; border-radius: 50px 50px 50px 50px/90px 90px 60px 60px; }
原理圖奉上:
.ellipse1 { width: 180px; height: 120px; background: #317ef3; border-radius: 100%; /* border-radius: 90px/60px; */ }
.ellipse2 { width: 120px; height: 180px; background: #317ef3; border-radius: 100%; /* border-radius: 60px/90px; */ }膠囊
.capsule1 { width: 200px; height: 100px; background: #317ef3; border-radius: 50px; }
.capsule2 { width: 100px; height: 200px; background: #317ef3; border-radius: 50px; }太極八卦陣圖
.taiji { width: 120px; height: 60px; background: #fff; border: 2px solid #317ef3; border-bottom: 60px solid #317ef3; border-radius: 100%; position: relative; } .taiji::before,.taiji::after{ content: ""; position: absolute; width: 20px; height: 20px; border-radius: 100%; } .taiji::before { left: 0; top: 50%; background: #fff; border: 20px solid #317ef3; } .taiji::after { right: 0; top: 50%; background: #317ef3; border: 20px solid #fff; }葉子(花瓣)
.leaf1 { width: 100px; height: 100px; background: #317ef3; border-radius: 0 100px; }
.leaf2 { width: 100px; height: 100px; background: #317ef3; border-radius: 80px 0px; }
.leaf3 { width: 100px; height: 100px; background: #317ef3; border-radius: 50px 50px 0 50px; }五葉花瓣
.five-petal { width: 160px; height: 160px; } .five-petal span { display: block; width: 80px; height: 80px; background: #317ef3; border-radius: 0 100px; transform-origin: 100% 100%; position: absolute; } .five-petal .petal2 { transform: rotate(72deg); } .five-petal .petal3 { transform: rotate(144deg); } .five-petal .petal4 { transform: rotate(216deg); } .five-petal .petal5 { transform: rotate(288deg); }四葉草
.four-leaf { width: 210px; height: 210px; position: relative; } .four-leaf span { display: block; width: 100px; height: 100px; background: #317ef3; position: absolute; } .four-leaf span.leaf1 { left: 0; top: 0; border-radius: 50px 50px 0 50px; } .four-leaf span.leaf2 { right: 0; top: 0; border-radius: 50px 50px 50px 0; } .four-leaf span.leaf3 { left: 0; bottom: 0; border-radius: 50px 0 50px 50px; } .four-leaf span.leaf4 { right: 0; bottom: 0; border-radius: 0 50px 50px 50px; }無窮符號
.infinite { width: 250px; position: relative; } .infinite span { width: 100px; height: 100px; background: #fff; border: 2px solid #317ef3; position: absolute; } .infinite .lf { border-radius: 50px 50px 0 50px; transform: rotate(-45deg); left: 0; } .infinite .rt { border-radius: 50px 50px 50px 0; transform: rotate(45deg); right: 0; }小尾巴
.xwb1 { width: 100px; height: 60px; border-top: 20px solid #317ef3; border-radius: 0 60px 0 0; }
.xwb2 { width: 100px; height: 60px; border-left: 20px solid #317ef3; border-radius: 60px 0 0 0; }月亮
.moon { width: 100px; height: 100px; border-left: 30px solid #317ef3; border-radius: 50px 0 0 50px; }立體球型
.litiqiuxing1 { width: 100px; height: 100px; border-radius: 100%; background: #317ef3; background: radial-gradient(circle at 25% 35%, #fff, #317ef3, #071529); }
.litiqiuxing2 { width: 100px; height: 100px; border-radius: 100%; background: #317ef3; background: radial-gradient(circle at top, #fff, #317ef3, #071529) }
.litiqiuxing3 { width: 100px; height: 100px; border-radius: 100%; background: #317ef3; background: radial-gradient(circle at left top, #fff 10%, #78a8f2 30%, #0b59ca 60%, #04409a 80%, #202b3a 100%) }三角形實現原理
.triangle-shiyi { width: 0; height: 0; border: 50px solid #317ef3; border-left-color: red; border-top-color: aquamarine; border-right-color: bisque; }等腰直角三角
.dbzj-sanjiao1 { width: 0; height: 0; border-bottom: 100px solid #317ef3; border-right: 100px solid transparent; } .dbzj-sanjiao2 { width: 0; height: 0; border-bottom: 100px solid #317ef3; border-left: 100px solid transparent; }
.dbzj-sanjiao3 { width: 0; height: 0; border-top: 100px solid #317ef3; border-right: 100px solid transparent; } .dbzj-sanjiao4 { width: 0; height: 0; border-top: 100px solid #317ef3; border-left: 100px solid transparent; }
.dbzj-sanjiao5 { width: 0; height: 0; border-bottom: 50px solid #317ef3; border-left: 100px solid transparent; /* border-left、border-right決定寬度 */ /* border-top、border-bottom決定高度 */ } .dbzj-sanjiao6 { width: 0; height: 0; border-bottom: 50px solid #317ef3; border-right: 100px solid transparent; }
.dbzj-sanjiao7 { width: 0; height: 0; border-bottom: 100px solid #317ef3; border-right: 50px solid transparent; } .dbzj-sanjiao8 { width: 0; height: 0; border-bottom: 100px solid #317ef3; border-left: 50px solid transparent; }
.dbzj-sanjiao9 { width: 0; height: 0; border-top: 50px solid #317ef3; border-right: 100px solid transparent; } .dbzj-sanjiao10 { width: 0; height: 0; border-top: 50px solid #317ef3; border-left: 100px solid transparent; }銳角三角形
.dbzj-sanjiao11 { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 100px solid #317ef3; /*三角形的寬度w=left+right,h=bottom*/ }鈍角三角形
.dbzj-sanjiao12 { width: 0; height: 0; border-bottom: 50px solid #317ef3; border-right: 100px solid transparent; position: relative; } .dbzj-sanjiao12::before { content: ""; position: absolute; left: 0; top: 0; border-bottom: 50px solid #fff; border-right: 20px solid transparent; }平行四邊形
.pxsbx1 { width: 200px; height: 120px; background: #317ef3; color: #fff; text-align: center; line-height: 120px; font-size: 18px; transform: skewX(30deg); }
.pxsbx2 { width: 200px; height: 120px; text-align: center; line-height: 120px; position: relative; font-size: 18px; color: #fff; } .pxsbx2::after { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 200px; height: 120px; background: #317ef3; transform: skewX(30deg); }
與上面的平行四邊形相比,可以看到該圖形中的文字不會發生傾斜,方法是在文字層后添加一個偽元素繪制平行四邊。
.pxsbx3 { width: 100px; height: 160px; background: #317ef3; transform: skewY(30deg); } .pxsbx4 { width: 100px; height: 160px; background: #317ef3; transform: skewY(-30deg); }梯形
.tixing1 { width: 100px; height: 0; border-bottom: 100px solid #317ef3; border-left: 50px solid transparent; border-right: 50px solid transparent; }
.tixing2 { width: 100px; height: 100px; background: #317ef3; position: relative; } .tixing2::before { content: ""; width: 0; height: 0; border-bottom: 100px solid #317ef3; border-right: 50px solid transparent; position: absolute; left: 100%; top: 0; }邊框對話框
.duihuakuang1 { width: 200px; height: 120px; border: 2px solid #317ef3; position: relative; } .duihuakuang1::before { content: ""; position: absolute; left: 40px; top: 92%; width: 20px; height: 20px; border-right: 2px solid #317ef3; border-bottom: 2px solid #317ef3; transform: rotate(45deg); background: #fff; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116992.html
摘要:我們在編寫前端代碼時,經常會遇到各種各樣的形狀圖形如邊框對話框,三角形,平行四邊形圓角邊框圓形四葉草花瓣等,除了用背景圖片雪碧圖或精靈圖定位引用和插入圖片的方法,我們還可以用邊框圓角漸變和定位的方法結合使用,繪制各種各樣的形狀圖形。 我們在編寫前端代碼時,經常會遇到各種各樣的形狀圖形(如:邊框對話框,三角形,平行四邊形、圓角邊框、圓形、四葉草、花瓣等),除了用背景圖片(css雪碧圖或c...
摘要:雖然我們現在大都使用字體圖標或者圖片,似乎使用來做圖標意義不是很大,但怎么實現這些圖標用到的一些技巧及思路是很值得我們的學習。 雖然我們現在大都使用字體圖標或者svg圖片,似乎使用 CSS 來做圖標意義不是很大,但怎么實現這些圖標用到的一些技巧及思路是很值得我們的學習。 一、實心圓 showImg(https://segmentfault.com/img/bVbsV6v?w=171&h...
摘要:雖然我們現在大都使用字體圖標或者圖片,似乎使用來做圖標意義不是很大,但怎么實現這些圖標用到的一些技巧及思路是很值得我們的學習。 雖然我們現在大都使用字體圖標或者svg圖片,似乎使用 CSS 來做圖標意義不是很大,但怎么實現這些圖標用到的一些技巧及思路是很值得我們的學習。 一、實心圓 showImg(https://segmentfault.com/img/bVbsV6v?w=171&h...
摘要:元素元素歸屬于容器和結構元素,在文檔內允許嵌套使用獨立的片段。如果包含葡萄的組被移動到文檔的末尾,它將出現在西瓜的前面。例如,將葡萄的莖的路徑移動到組的末尾將導致莖在頂部。 作者:DDU(滬江前端開發工程師)本文是原文翻譯,轉載請注明作者及出處。 簡介 Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語言。這些圖形由路徑,圖片和(或)文本組成,并能...
閱讀 2847·2021-09-27 13:35
閱讀 624·2021-09-23 11:22
閱讀 2892·2019-08-30 15:54
閱讀 1611·2019-08-29 16:27
閱讀 2467·2019-08-29 15:05
閱讀 2349·2019-08-23 18:11
閱讀 3523·2019-08-23 16:32
閱讀 2941·2019-08-23 14:56