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

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

1、　　向上三角形

CSS核心代碼

.triangle-up {

  width: 0;

  border-left: 50px solid transparent;

  border-right: 50px solid transparent;

  border-bottom: 100px solid red;

}

2、　　左上三角形

CSS核心代碼

.triangle-topleft {

  width: 0;

  border-top: 100px solid red;

  border-right: 100px solid transparent;

}

3、　　弧形尾箭頭

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核心代碼：

.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、　　帶尖角的說(shuō)話泡泡

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核心代碼

.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、放大鏡

.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、長(zhǎng)長(zhǎng)的指向圖形

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。上面展示的效果可能部分實(shí)用性不大，但是使用css制作三角和圓有效果應(yīng)用還是很多了，特別是用來(lái)制作tips效果。

到此，相信大家對(duì)“怎么用純css繪制各種圖形”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(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元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：怎么用純css繪制各種圖形-創(chuàng)新互聯(lián)
文章出自：http://www.aaarwkj.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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)