面试的必考题目是，css布局技巧-css三角巧妙运用，百度前端岗一面+二面内容

👉css盒子模型及其实战案例（下）

👉css网页布局之浮动及其实战案例（超详细）

👉css中的定位详解

👉css中元素的显示与隐藏

👉我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧

👉css三角的做法及其案例

---

目录

• • 📋 个人简介

• 前言

• • css三角强化

• 案例

• 结语

前言

=================================================================

上期我们写了css三角，这期我们写css三角巧妙运用，用案例学习。

css三角强化

---

上期的css三角是等腰的，有是我们需要像下面这中的直角，该怎么做呢？

接下来我一步步教你做：

在上期做法基础上做改动就行

只需要把上期这个盒子左边框和下边框宽度设为0,上边框加大宽度就行。

.demo1{

width:0;

height: 0;

line-height: 0;

font-size: 0;

border-top:20px solid red ;

border-right:10px solid green ;

border-bottom:0px solid blue ;

border-left:0px solid purple ;

}

正好得到两个方向的直角三角形，将其中一个变透明就行。