溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了css中設(shè)置三角形的方法，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“css中設(shè)置三角形的方法”這篇文章吧。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。
css中設(shè)置三角形的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后設(shè)置一個(gè)span元素為塊級(jí)元素，并分別設(shè)置border的四邊都為不同的顏色；最后通過設(shè)置上邊框和左右邊框?qū)挾葘?shí)現(xiàn)三角形即可。
使用css設(shè)置三角形
1.在開發(fā)中，有時(shí)候會(huì)用到一些小三角形來強(qiáng)調(diào)或者標(biāo)記元素，這樣以便區(qū)分不同的項(xiàng)目，然后把三角形繪制成一個(gè)比較明顯的顏色，就達(dá)到效果了，那怎么才能畫出三角形呢，之前我也不清楚，最近看到了有些網(wǎng)頁在使用，在進(jìn)行標(biāo)記的時(shí)候，都是使用的是背景圖片進(jìn)行標(biāo)記，這樣在網(wǎng)頁顯示的時(shí)候，感覺有點(diǎn)生硬，畢竟圖片的加載沒有css加載那么順暢
下面看一段代碼：這里設(shè)置了一個(gè)span 元素為塊級(jí)元素，分別設(shè)置border的四邊都為不同的顏色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100%;
margin: 50px 0;
text-align: center;
}
span {
position: relative;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
border-style: solid;
border-width: 50px;
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
}
</style>
</head>
<body>
<div>如何設(shè)置三角形?</div>
<div>
<span>
</span>
</div>
</body>
</html>運(yùn)行結(jié)果：發(fā)現(xiàn)四面的邊框，居然是這種梯形的結(jié)構(gòu)，如果把梯形上底變?yōu)?，不就是我們想要的三角形了么，而且這是使用html 和css做不來的，不存在使用靜態(tài)頁面就可以實(shí)行，不存在圖片的不連續(xù)顯示問題；
接下來就是把梯形的上底變?yōu)? 了
上底變?yōu)? 很簡單，只要把元素的高和寬設(shè)置為0就可以了
width:----->0 得到上下兩種箭頭
height:------->0 得到左右兩種箭頭
1.當(dāng)我們想要上箭頭的時(shí)候，就把元素的左右邊框和下邊框去掉
2.當(dāng)我們想要下箭頭的時(shí)候，就把元素的左右邊框和上邊框去掉
3.當(dāng)我們想要左箭頭的時(shí)候，就把上下邊框和右邊框去掉
4.當(dāng)我們想要右箭頭的時(shí)候，就把上下邊框和左邊框去掉
想法是好的，試了一下，想要上加箭頭：設(shè)置css如下：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
}運(yùn)行結(jié)果：發(fā)現(xiàn)不行啊，什么都沒有
那我們換個(gè)方法：既然設(shè)置寬度不行，那我們就設(shè)置顏色吧，只要把上，左，右邊框的顏色設(shè)置為透明的，不就可以了么，css 中，剛好有一個(gè)設(shè)置顏色為透明的值
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
/* border-top-color: red;
border-left-color: blue; */
border-bottom-color: yellow;
/* border-right-color: black; */
}運(yùn)行結(jié)果：OK，大功告成?。?！
設(shè)置下箭頭：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
border-top-color: red;
/* border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black; */
}
設(shè)置左箭頭：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
border-top-color: transparent;
border-bottom-color: transparent;
/* border-left-color: transparent; */
border-right-color: transparent;
/* 設(shè)置上邊框和左右邊框?qū)挾葹? 開始*/
/* border-top-color: red; */
border-left-color: blue;
/* border-bottom-color: yellow;
border-right-color: black; */
}
設(shè)置右箭頭：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
/* border-right-color: transparent; */
/* border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow; */
border-right-color: black;
}
當(dāng)然，css 還可寫在一起，這樣看起來要簡單一些：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
/* 先后設(shè)置上右下左的border-color屬性都是一樣的，需要哪個(gè)箭頭，再設(shè)置哪個(gè)方向的顏色屬性，這樣，最后設(shè)置的屬性覆蓋了前面的屬性，就變成箭頭了 */
border: 50px solid transparent;
border-top-color: red;
}
以上，是使用html和css兩項(xiàng)綜合起來設(shè)置的箭頭，可以不可以再設(shè)置簡單一點(diǎn)呢？
下面，我采用class 屬性來設(shè)置箭頭，當(dāng)需要箭頭的時(shí)候，直接加上這個(gè)class 屬性就可以，當(dāng)不想要箭頭的時(shí)候，去除調(diào)這個(gè)類就好了
下面來看一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100%;
margin: 50px 0;
text-align: center;
}
.jindaobox {
position: relative;
width: 980px;
margin: 20px auto;
}
li {
list-style: none;
float: left;
position: relative;
border: 1px solid #eee;
margin-right: 30px;
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.active {
border: 1px solid red !important;
}
.active::after {
position: absolute;
content: "";
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: red;
top: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div>請選擇你喜歡的電影</div>
<ul>
<li>飛龍?jiān)谔?lt;/li>
<li class="lis active">紫川</li>
<li>封神演義</li>
<li class="lis active">風(fēng)云第一刀</li>
<li>天外飛仙</li>
</ul>
</body>
</html>運(yùn)行結(jié)果：
這樣，就實(shí)現(xiàn)了使用class 屬性控制箭頭的方式，當(dāng)需要選中時(shí)，給li 元素加上一個(gè)active class 屬性即可，當(dāng)不需要時(shí)，就去除active class 屬性。
以上就是關(guān)于“css中設(shè)置三角形的方法”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯(cuò)，勞請分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼