前言：

這個(gè)也是我最近學(xué)習(xí)才發(fā)現(xiàn)的一個(gè)細(xì)節(jié)，就是常常會(huì)在一些網(wǎng)站，看到下面圖中這樣的一個(gè)小三角，以前沒怎么學(xué)CSS，我一直以為它是個(gè)精靈圖之類。😂

我是最近才開始認(rèn)真學(xué)的前端，比純小白稍微懂的稍微多一點(diǎn)點(diǎn)。

文章如若有那些不足之處，請及時(shí)指出，在此鄭重感謝。

一、CSS三角做法

我們先簡單說一下，如何把三角畫出來，懂用什么畫的之后，基本就完事了。

html代碼：

<div class="sanjiao"> </div>

css代碼：

.sanjiao {/* 為了好看讓它居中 */margin: 0 auto;/* 高度和寬度必須指定為零 */width: 0;height: 0;/* 給四邊都設(shè)置邊框和顏色 */border-bottom: 10px solid #FFD5A1;border-top: 10px solid #00A1D6;border-left: 10px solid saddlebrown;border-right: 10px solid seagreen; }

我們先來看看代碼效果，之后再談?wù)撈渌墓?/p>

頁面展示效果就是一個(gè)四個(gè)小三角拼成的正方形。

原理是什么呢？

盒子每一邊的邊框都是梯形的，盒子大小為0時(shí)，梯形上底(邊框內(nèi)邊)也為0，所以兩邊會(huì)合并成三角形。

原理圖大致就如下：

當(dāng)最后它中間的盒子寬度、高度都為零，就成了角形。

二、CSS京東應(yīng)用

原理知道了之后，我們來做一個(gè)小小的案例吧。

html代碼：

<div class="main"><div class="box1"></div><!-- 再寫一個(gè)div來做三角 --><div class="box2"></div> </div>

css代碼：

.mian {/* 我們再給父元素設(shè)置一個(gè)相對定位*/position: relative;}.box1 {margin-top:10px;width: 100px;height: 100px;background-color: #81c784;border-radius:5px; }.box2 {width: 0px;height: 0px;/* 設(shè)置四邊邊框?qū)挾?#xff0c;將顏色設(shè)置為透明 */border: 10px solid transparent;/* 再進(jìn)行下面的設(shè)置，這樣之后就會(huì)出現(xiàn)一個(gè)紫色向上的一個(gè)小三角*/border-bottom: 10px solid #E1BEE7;position: absolute;left: 80px;top: -10px;} </style>

最后的成果大致如下：

css這個(gè)邊框還有很多可以玩，還在學(xué)習(xí)中…

三、自言自語

最近在學(xué)css，說真的，感覺確實(shí)比后端要好玩很多，創(chuàng)意也多很多，不會(huì)像后端那么固定（增刪改查😂）。

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。