資訊專欄INFORMATION COLUMN
摘要：純畫三角原理解析因?yàn)橹白鲆粋€(gè)頁面出現(xiàn)了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設(shè)置成三角的樣式。
純CSS畫三角原理解析
因?yàn)橹白鲆粋€(gè)頁面出現(xiàn)了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設(shè)置成三角的樣式。于是搜了一波原理整理如下
1.邊框到底是什么樣的？因?yàn)楹苌儆玫胶艽值倪吙?，而?0%的情況下我們用邊框都是一個(gè)顏色的。所以我發(fā)現(xiàn)我并不知道邊框到底是什么樣子的，一直一來我都以為四條邊都是一條線（不要告訴我就我一個(gè)人這樣認(rèn)為）。
實(shí)驗(yàn)了一下才發(fā)現(xiàn)邊框越來越粗的時(shí)候，很明顯每條邊都是一個(gè)梯形
2.如何做出三角？因?yàn)橹翱吹拇a都會(huì)寫上width: 0; height: 0;當(dāng)時(shí)不理解為什么，現(xiàn)在很容易就能想到，用極限的思維，當(dāng)內(nèi)容大小趨近與零的時(shí)候,每個(gè)邊就是一個(gè)三角了。
這個(gè)時(shí)候就可以看到三角已經(jīng)出現(xiàn)，我們要做的就是把其他邊設(shè)置為透明的就可以得到我們需要的三角了。
3.還有沒有更多的情況？通過分別取消邊框發(fā)現(xiàn)下面幾種情況：
取消一條邊的時(shí)候，與這條邊相鄰的兩條邊的接觸部分會(huì)變成直的
當(dāng)僅有鄰邊時(shí)， 兩個(gè)邊會(huì)變成對(duì)分的三角
當(dāng)保留邊沒有其他接觸時(shí)，極限情況所有東西都會(huì)消失。
明白了這些之后，再看代碼是不是感覺就很清晰了呢？然后我們就可以做出更多形狀的三角。有了這些形狀再加上旋轉(zhuǎn)屬性，基本所有的場(chǎng)景都能使用。
直角三角.box {
/* 內(nèi)部大小 */
width: 0px;
height: 0px;
/* 邊框大小 只設(shè)置三條邊*/
border-top: #4285f4 solid;
border-right: transparent solid;
border-left: transparent solid;
border-width: 85px;
/* 其他設(shè)置 可有可無*/
margin: 50px;
}
更小的直角三角形
利用對(duì)邊的情況，做出更小的直角三角形
.box {
/* 內(nèi)部大小 */
width: 0px;
height: 0px;
/* 邊框大小 只設(shè)置兩條邊*/
border-top: #4285f4 solid;
border-right: transparent solid;
border-width: 85px;
/* 其他設(shè)置 */
margin: 50px;
}
等腰銳角三角形
通過更改底邊的長(zhǎng)度可以做出各種不同的三角形
.box {
/* 內(nèi)部大小 */
width: 0px;
height: 0px;
/* 邊框大小 */
border-top: #4285f4 170px solid;
border-right: transparent 85px solid;
border-left: transparent 85px solid;
/* 其他設(shè)置 */
margin: 50px;
}
對(duì)話氣泡
把偽元素設(shè)置成三角，再通過定位確定位置，就可以制作出來經(jīng)典的對(duì)話氣泡了。
.bubbly {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background: #00ccbb;
border-radius: 8px;
width: 200px;
padding: 40px 10px;
text-align: center;
color: white;
font-size: 20px;
.bubbly:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border: 34px solid transparent;
border-top-color: #00ccbb;
border-bottom: 0;
border-left: 0;
margin: 0 0 -34px -17px;
}
總結(jié)
通過對(duì)四條邊的長(zhǎng)度的設(shè)置，還可以做出各種各樣的三角形，幾乎所有三角的形狀都可以設(shè)置出來。
另外還可以通過設(shè)置寬高中的一項(xiàng)為0另一個(gè)不為0，來設(shè)置出體形的形狀，大家可以自由實(shí)驗(yàn)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115737.html
摘要：前言對(duì)于氣泡對(duì)話框或者與內(nèi)容連接部分會(huì)有小三角形效果，可能在以前直接用圖片去實(shí)現(xiàn)，其實(shí)用純即可實(shí)現(xiàn)，下面要實(shí)現(xiàn)的效果分別是微信對(duì)話框和面包屑，以此回顧記錄一下。 前言 對(duì)于氣泡對(duì)話框或者Popover與內(nèi)容連接部分會(huì)有小三角形效果，可能在以前直接用圖片去實(shí)現(xiàn)，其實(shí)用純css即可實(shí)現(xiàn)，下面要實(shí)現(xiàn)的效果分別是微信對(duì)話框和面包屑，以此回顧記錄一下。 效果如下： showImg(https:/...
摘要：層疊即表示允許以多種方式來描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄...
摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄...
閱讀 3203·2023-04-25 14:15
閱讀 2883·2021-11-04 16:11
閱讀 3443·2021-10-14 09:42
閱讀 509·2019-08-30 15:52
閱讀 2885·2019-08-30 14:03
閱讀 3624·2019-08-30 13:00
閱讀 2167·2019-08-26 11:40
閱讀 3381·2019-08-26 10:25
