好久沒寫博客了，這段實習期間真的好忙哦。終於今天有時間來對之前說的面試進行一個小小的總結，後續再慢慢補充一些。
在面試阿里的前端時，對基礎的知識的考察中，考察到一個經典的問題，但是博主當時這個問題並沒有去進行相應的學習，面試官對我建議後續再補充學習下，因此今天也來補充總結下。
CSS實現三角形
對於一個三角形，如何用css來實現呢？其實代碼很簡單，在此直接貼上相應的代碼以及相應的效果。
<!DOCTYPE html>
<html>
<head>
<style>
.myTriangle{
width: 0px;
height: 0px;
border: 40px solid;
border-color: orange blue red green;
}
</style>
</head>
<body>
<div class="myTriangle"></div>
</body>
</html>
效果圖如下：
嗯，聰明的你看到這個顏色效果以及相應的 border-color 代碼是不是知道怎麼實現了
如果我要下面的紅色三角形那就其他邊顏色爲透明就好啦
<!DOCTYPE html>
<html>
<head>
<style>
.myTriangle{
width: 0px;
height: 0px;
border: 40px solid;
border-top-color: transparent;
border-left-color:transparent;
border-right-color: transparent;
border-bottom-color: red;
}
</style>
</head>
<body>
<div class="myTriangle"></div>
</body>
</html>
實現效果如下：
然後如果你要實現一個直角三角形，再進行相應的形狀構思就行啦
<!DOCTYPE html>
<html>
<head>
<style>
.myTriangle{
width: 0px;
height: 0px;
border: 40px solid;
border-top-color: transparent;
border-left-color:transparent;
border-right: none;
border-bottom-color: red;
}
</style>
</head>
<body>
<div class="myTriangle"></div>
</body>
</html>
你可能會好奇爲什麼border如此神奇，這裏給段代碼和效果，我想你也會恍然大悟，然後感嘆神奇的！
<!DOCTYPE html>
<html>
<head>
<style>
.myTriangle{
width: 10px;
height: 10px;
border: 40px solid;
border-color: orange blue red green;
}
</style>
</head>
<body>
<div class="myTriangle"></div>
</body>
</html>
效果如下：
