使用CSS實現小三角邊框原理解析
發(fā)布時間：2021-11-03 09:59:12 作者：佚名 
我要評論
我要評論本文給大家介紹如何把三角畫出來，基于css代碼實現小三角邊框原理解析，感興趣的朋友跟隨小編一起看看吧
前言：
這個也是我最近學習才發(fā)現的一個細節(jié)，就是常常會在一些網站，看到下面圖中這樣的一個小三角，以前沒怎么學CSS，我一直以為它是個精靈圖之類。😂
我是最近才開始認真學的前端，比純小白稍微懂的稍微多一點點。
文章如若有那些不足之處，請及時指出，在此鄭重感謝。
一、CSS三角做法
我們先簡單說一下，如何把三角畫出來，懂用什么畫的之后，基本就完事了。
html代碼：
<div class="sanjiao"> </div>
css代碼：
.sanjiao {
/* 為了好看讓它居中 */
margin: 0 auto;
/* 高度和寬度必須指定為零 */
width: 0;
height: 0;
/* 給四邊都設置邊框和顏色 */
border-bottom: 10px solid #FFD5A1;
border-top: 10px solid #00A1D6;
border-left: 10px solid saddlebrown;
border-right: 10px solid seagreen;
}
我們先來看看代碼效果，之后再談論其他的哈
頁面展示效果就是一個四個小三角拼成的正方形。
原理是什么呢？
盒子每一邊的邊框都是梯形的，盒子大小為0時，梯形上底(邊框內邊)也為0，所以兩邊會合并成三角形。
原理圖大致就如下：
當最后它中間的盒子寬度、高度都為零，就成了角形。
二、CSS京東應用
原理知道了之后，我們來做一個小小的案例吧。
html代碼：
<div class="main">
<div class="box1">
</div>
<!-- 再寫一個div來做三角 -->
<div class="box2">
</div>
</div>
css代碼：
.mian {
/* 我們再給父元素設置一個相對定位*/
position: relative;
}
.box1 {
margin-top:10px;
width: 100px;
height: 100px;
background-color: #81c784;
border-radius:5px;
}
.box2 {
width: 0px;
height: 0px;
/* 設置四邊邊框寬度，將顏色設置為透明 */
border: 10px solid transparent;
/* 再進行下面的設置，這樣之后就會出現一個紫色向上的一個小三角*/
border-bottom: 10px solid #E1BEE7;
position: absolute;
left: 80px;
top: -10px;
}
</style>
最后的成果大致如下：
css這個邊框還有很多可以玩，還在學習中...
三、自言自語
最近在學css，說真的，感覺確實比后端要好玩很多，創(chuàng)意也多很多，不會像后端那么固定（增刪改查😂）。
到此這篇關于使用CSS實現小三角邊框原理解析的文章就介紹到這了,更多相關CSS 小三角邊框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了通過CSS邊框實現三角形和箭頭的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-15- 下面的效果完全是用css 來實現的，那么是怎么實現的呢，我們知道 html 中有一些特殊的字符，通過特殊字符，利用 css 中的margin或者position方法完全可以實現以上效果，感2013-03-28
