前言：

這個也是我最近學習才發現的一個細節，就是常常會在一些網站，看到下面圖中這樣的一個小三角，以前沒怎么學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，說真的，感覺確實比后端要好玩很多，創意也多很多，不會像后端那么固定（增刪改查😂）。

目前還是前端小白，希望大家多多諒解，正在努力中。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

一個可愛的貓咪小表情，實在太可愛了，沒辦法抵擋住誘惑啊。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」CSS 做三角边框，必会的基础操作之一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。