之前寫(xiě)過(guò)一篇文章,叫做css三角形四條邊全攻略
同時(shí)遇到了些問(wèn)題,有些朋友問(wèn)我能不能出一個(gè)三條邊的攻略,畢竟現(xiàn)在主流的都是用三條邊畫(huà)三角形。
仔細(xì)想想,也對(duì),所以今天我出一個(gè)三條邊的攻略
進(jìn)入主題
看如下代碼
<!DOCTYPE html>
<html lang="en">
<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>
[class*="triangle"] {
width:0;
height: 0;
}
.triangle{
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
以下是效果圖
這里,我們定義了三條邊,分別為border-top,border-left,border-right。他們的值分別相等,border-left,border-right的顏色為透明,同時(shí)我們沒(méi)有定義border-bottom。
形成了一個(gè)等腰直角三角形,直角在最底部
個(gè)人覺(jué)得,看這樣的代碼,只會(huì)復(fù)制粘貼,沒(méi)有懂原理
所以現(xiàn)在,我來(lái)教大家怎么找規(guī)律
我們可以從上面的效果圖中發(fā)現(xiàn),底部是沒(méi)有線的,從代碼當(dāng)中,我們可以發(fā)現(xiàn),我們沒(méi)有定義border-bottom。左邊和右邊是白色,白色是body標(biāo)簽的背景色,相當(dāng)于兩邊是透明的,我們從代碼中也可以發(fā)現(xiàn),border-left和border-right的顏色是透明的。
所以現(xiàn)在我們看幾幅效果圖
這是一張直角為上面的等腰直角三角形
根據(jù)上張效果圖的經(jīng)驗(yàn)。我們來(lái)分析一下
頂部是沒(méi)有線的,所以頂部可能沒(méi)有定義,即border-top不存在,左右兩邊是白色,所以border-left和border-right是透明的,而底部是有線的,而且是最長(zhǎng)的,所以border-bottom有值并且顏色應(yīng)該是紅色
這里是效果圖的源代碼
<!DOCTYPE html>
<html lang="en">
<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>
[class*="triangle"] {
width:0;
height: 0;
}
.triangle{
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
我們猜對(duì)了O(∩_∩)O
接下來(lái),我們繼續(xù)看效果圖
從這張效果圖中,我們發(fā)現(xiàn)這不是一個(gè)等腰直角,是一個(gè)擁有60,30,90度的直角三角形,其中有線并最長(zhǎng)的是頂部,所以假設(shè)頂部為唯一有線的,左右兩個(gè)不對(duì)等,但都是透明的,所以border-left和border-right應(yīng)該是有值,但為透明,顯然底部即border-bottom不存在值。
從效果圖中,我們發(fā)現(xiàn)左邊的三角形的面積沒(méi)有比右邊的大,所以我們可以假設(shè)border-right比border-left大
現(xiàn)在我們來(lái)驗(yàn)證我們的假設(shè)
<!DOCTYPE html>
<html lang="en">
<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>
[class*="triangle"] {
width:0;
height: 0;
}
.triangle{
border-top: 40px solid red;
border-left: 30px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
我們答對(duì)了,O(∩_∩)O
現(xiàn)在筆者出幾道題,同學(xué)可以嘗試分析一下
1.
?
2.
本文摘自 :https://blog.51cto.com/u