中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

打開APP

未登錄

開通VIP，暢享免費電子書等14項超值服

首頁

好書

留言交流

下載APP

聯(lián)系客服

《轉(zhuǎn)》css3制作各種形狀圖像

userphoto

默語 >《【表格制作】》

2017.04.18

css

圓形-橢圓形-三角形-倒三角形=左三角形-右三角形-菱形-平行四邊形- 星形-六角星形-五邊形-六邊形-八角形-心形-蛋形-無窮符號-消息提示框-吃豆人

步驟閱讀工具/原料

編輯器一個有一定的CSS3基礎

方法/步驟

1制作圓形：要使用CSS來制作一個圓形，我們需要一個div，被給它設置一個ID<div id="circle"></div> 圓形在設置CSS時要設置寬度和高度相等，然后設置border-radius屬性為寬度或高度的一半即可：#circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px;}

2制作橢圓形：橢圓形是正圓形的一個變體，同樣使用一個帶ID的div來制作<div id="oval"></div> 設置橢圓形的CSS時，高度要設置為寬度的一半，border-radius屬性也要做相應的改變：#oval { width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px;}

3制作三角形：要創(chuàng)建一個CSS三角形，需要使用border，通過設置不同邊的透明效果，我們可以制作出三角形的現(xiàn)狀。另外，在制作三角形時，寬度和高度要設置為0。<div id="triangle"></div> #triangle { width: 0; height: 0; border-bottom: 140px solid #fcf921; border-left: 70px solid transparent; border-right: 70px solid transparent;}

4制作倒三角形：與正三角形不同的是，倒三角形要設置的是border-top、border-left和border-right三條邊的屬性：#triangle { width: 0; height: 0; border-top: 140px solid #20a3bf; border-left: 70px solid transparent; border-right: 70px solid transparent;}

5制作左三角形：左三角形操作的是border-top、border-left和border-right三條邊的屬性，其中上邊和下邊要設置透明屬性。#triangle_left { width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #6bbf20; border-bottom: 70px solid transparent;}

6制作菱形制作菱形的方法有很多種。這里使用的是transform屬性和rotate相結(jié)合，使兩個正反三角形上下顯示。#diamond { width: 120px; height: 120px; background: #1eff00;/* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);/* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px;}

7制作梯形：梯形是三角形的一個變體，設置CSS梯形時，左右兩條邊設置為相等，并且給它設置一個寬度。#trapezium { height: 0; width: 120px; border-bottom: 120px solid #ec3504; border-left: 60px solid transparent; border-right: 60px solid transparent;}

8制作平行四邊形：平行四邊形的制作方式是使用transform屬性使長方形傾斜一個角度。#parallelogram { width: 160px; height: 100px; background: #8734f7; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg);}

9星形：星形的HTML結(jié)構(gòu)同樣使用一個帶ID的空div。星形的實現(xiàn)方式比較復雜，主要是使用transform屬性來旋轉(zhuǎn)不同的邊。仔細體會下面的代碼。#star { width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);} #star:before { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);} #star:after { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg);}

10六角星形：和五角星的制作方法不同，六角星形狀的制作方法是操縱border屬性來制作兩半圖形，然后合并它們。#star_six_points { width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto;} #star_six_points:after { content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #de34f7; margin: 30px 0 0 -50px;}

11 六邊形：六邊形的制作方法可以有很多種，可以像五邊形一樣，先制作一個長方形，然后在它的上面和下面各放置一個三角形。#hexagon { width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto;} #hexagon:before { content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e;} #hexagon:after { content: ""; width: 0; height: 0; position: absolute; bottom: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #fc5e5e;}

12心形：心形的制作是非常復雜的，可以使用偽元素來制作，分別將偽元素旋轉(zhuǎn)不同的角度，并修改transform-origin屬性來元素的旋轉(zhuǎn)中心點。#heart { position: relative;} #heart:before,#heart:after { content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;} #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%;}

13蛋形：蛋形時橢圓形的一個變體，它的高度要比寬度稍大，并且設置正確的border-radius屬性即可以制作出一個蛋形。#egg { width: 136px; height: 190px; background: #ffc000; display: block; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}

14無窮符號：無窮符號可以通過border屬性和設置偽元素的角度來實現(xiàn)。#infinity { width: 220px; height: 100px; position: relative;} #infinity:before,#infinity:after { content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);} #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}

15消息提示框：消息提示框可以先制作一個圓角矩形，然后在需要的地方放置一個三角形。#comment_bubble { width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;} #comment_bubble:before { content: ""; width: 0; height: 0; right: 100%; top: 38px; position: absolute; border-top: 13px solid transparent; border-right: 26px solid #088cb7; border-bottom: 13px solid transparent;}

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

猜你喜歡

類似文章

用CSS代碼寫出的各種形狀圖形的方法_CSS_網(wǎng)頁制作_腳本之家

html5和css3制作不規(guī)則的網(wǎng)頁背景分割線

純CSS畫的基本圖形（矩形、圓形、三角形、多邊形、愛心、八卦等）

CSS3 畫基本圖形，圓形、橢圓形、三角形等

CSS 創(chuàng)意構(gòu)想

代碼學習群簡易教程（35）

更多類似文章 >>

生活服務

熱點新聞

聯(lián)系我們

分享收藏導長圖關(guān)注下載文章

綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！

如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服