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