怎么用純css繪制各種圖形-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“怎么用純css繪制各種圖形”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用純css繪制各種圖形”吧!

創(chuàng)新互聯(lián)一直在為企業(yè)提供服務(wù)，多年的磨煉，使我們在創(chuàng)意設(shè)計，營銷型網(wǎng)站建設(shè)到技術(shù)研發(fā)擁有了開發(fā)經(jīng)驗。我們擅長傾聽企業(yè)需求，挖掘用戶對產(chǎn)品需求服務(wù)價值，為企業(yè)制作有用的創(chuàng)意設(shè)計體驗。核心團(tuán)隊擁有超過十多年以上行業(yè)經(jīng)驗，涵蓋創(chuàng)意，策化，開發(fā)等專業(yè)領(lǐng)域，公司涉及領(lǐng)域有基礎(chǔ)互聯(lián)網(wǎng)服務(wù)成都移動云計算中心、成都app開發(fā)、手機(jī)移動建站、網(wǎng)頁設(shè)計、網(wǎng)絡(luò)整合營銷。

1、　　向上三角形

怎么用純css繪制各種圖形

CSS核心代碼

.triangle-up {

  width: 0;

  border-left: 50px solid transparent;

  border-right: 50px solid transparent;

  border-bottom: 100px solid red;

}

2、　　左上三角形

怎么用純css繪制各種圖形

CSS核心代碼

.triangle-topleft {

  width: 0;

  border-top: 100px solid red;

  border-right: 100px solid transparent;

}

3、　　弧形尾箭頭

怎么用純css繪制各種圖形

CSS核心代碼

.curvedarrow {

  position: relative;

  width: 0;

  border-top: 90px solid transparent;

  border-right: 90px solid red;

  transform: rotate(10deg) translateX(100%);

}

.curvedarrow:after {

  content: "";

  position: absolute;

  border: 0 solid transparent;

  border-top: 30px solid red;

  border-radius: 200px 0 0 0;

  top: -120px; left: -90px;

  width: 120px; height: 120px;

  transform: rotate(45deg);

}

4、　　吃豆人

怎么用純css繪制各種圖形

CSS核心代碼：

.pacman {

  width: 0px; height: 0px;

  border-right: 60px solid transparent;

  border-top: 60px solid red;

  border-left: 60px solid red;

  border-bottom: 60px solid red;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  border-bottom-left-radius: 60px;

  border-bottom-right-radius: 60px;

}

5、　　帶尖角的說話泡泡

怎么用純css繪制各種圖形

CSS核心代碼：

.talkbubble {

  width: 120px; height: 80px;

  background: red;

  position: relative;

  border-radius: 10px;

}

.talkbubble:before {

  content: "";

  position: absolute;

  right: 100%; top: 26px;

  border-top: 13px solid transparent;

  border-right: 26px solid red;

  border-bottom: 13px solid transparent;

}

6、bilibili電視機(jī)

怎么用純css繪制各種圖形

CSS核心代碼

.tv {

  position: relative;

  width: 200px; height: 150px;

  margin: 20px 0;

  background: red;

  border-radius: 50% / 10%;

  color: white;

  text-align: center;

  text-indent: .1em;

}

.tv:before {

  content: '';

  position: absolute;

  top: 10%; bottom: 10%; right: -5%; left: -5%;

  background: inherit;

  border-radius: 5% / 50%;

}

7、放大鏡

怎么用純css繪制各種圖形

.magnifying-glass {

  font-size: 10em;

  display: inline-block;

  width: 0.4em; height: 0.4em;

  border: 0.1em solid red;

  position: relative;

  border-radius: 0.35em;

}

.magnifying-glass:before {

  content: "";

  display: inline-block;

  position: absolute;

  right: -0.25em; bottom: -0.1em;

  border-width: 0;

  background: red;

  width: 0.35em; height: 0.08em;

  transform: rotate(45deg);

}

8、長長的指向圖形

怎么用純css繪制各種圖形

CSS核心代碼：

.pointer {

  width: 200px; height: 40px;

  position: relative;

  background: red;

}

.pointer:after {

  content: "";

  position: absolute;

  left: 0; bottom: 0;

  border-left: 20px solid white;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

}

.pointer:before {

  content: "";

  position: absolute;

  right: -20px; bottom: 0;

  border-left: 20px solid red;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

}

最后還是要跟小伙伴們強(qiáng)調(diào)一下，由于部分圖形效果使用了CSS3的部分屬性，如果你還在使用IE的話，我建議你使用現(xiàn)代瀏覽器，比如：Mozilla Firefox、Google Chrome、Safari、Opera。上面展示的效果可能部分實用性不大，但是使用css制作三角和圓有效果應(yīng)用還是很多了，特別是用來制作tips效果。

到此，相信大家對“怎么用純css繪制各種圖形”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標(biāo)題：怎么用純css繪制各種圖形-創(chuàng)新互聯(lián)
文章出自：http://bm7419.com/article38/ggepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營