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