利用css中的border制作小三角形

总所周知，元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许规定元素边框的样式、宽度和颜色。

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

我们来看一些设置了border的元素的效果

div{

width: 100px; height: 20px;

border: 20px solid red;

border-right-color: green;

border-bottom-color: blue;

border-left-color: black;

}

复制代码

效果如下：

当我们试着去减小盒子的宽高，甚至去掉宽高时：

div{

width: 20px; height: 20px;

border: 20px solid red;

border-right-color: green;

border-bottom-color: blue;

border-left-color: black;

}

复制代码

效果如下：

div{

width: 0;

border: 20px solid red;

border-right-color: green;

border-bottom-color: blue;

border-left-color: black;

}

复制代码

效果如下：

此时我们发现当元素的宽高为0时就会变成挤在一起的四个三角形。因此，我们可以想到，如果把其中的三条边框的颜色定义为透明色transparent,那么我们就会得到一个三角形！

将三条边框的颜色设置为透明色：

p{

width: 0;

border: 20px solid transparent;

border-top-color: blue;

}

复制代码

效果如下：

通过代码我们发现小三角的朝向是与设置了不透明颜色的那条边名字相反的方向。

例如，我们设置了border-top-color: blue; 小三角的朝向是朝下的。

小提示

在我们使用小三角时，因为四条边框组成了一个矩形，我们只是将其他三条边设置了透明色，它们仍然在文档里占据着位置，为了方便布局，我们可以设置小三角相对的那条边为none；具体原理如下：

div{

width: 0; height: 0;

border-top: 20px solid blue;

border-left: 20px solid red;

border-right: 20px solid green;

border-bottom: none;

}

复制代码

效果如下：

div{

width: 0;

bordet:20px solid transparent;

border-top: 20px solid blue;

border-bottom: none;

}

复制代码

效果如下：

小应用

当我们要制作这种布局时，可以用此种方法制作小三角，不必再用img或backgroud去实现。

ul {

overflow: hidden;

}

li {

list-style: none;

line-height: 60px;

text-align: center;

float: left;

width: 120px;

background: #f1f1f1;

margin-right: 1px

}

li p {

width: 0;

border: 8px solid transparent;

border-bottom-color: #666;

border-top: none;

float: right;

margin: 26px 10px 0 0

}

复制代码

• 我的课程
• 最近浏览
• 联系客服

复制代码

效果如下：

小扩展

div{

margin: 50px

}

div:nth-child(1){

width: 0;

border: 30px solid transparent;

border-bottom: 80px solid red;

/* border-top: none; */

}

div:nth-child(2){

width: 0;

border-top: 30px solid blue;

border-right:none;

border-left: 90px solid transparent;

border-bottom: none;

}

div:nth-child(3){

width: 0;

border-top: 30px solid blue;

border-right:90px solid transparent;

border-left: 10px solid transparent;

border-bottom: none;

}

复制代码

复制代码

效果如下：

我们还可以设置把border的边设置成不同的像素，以达到想要的效果。

此文为一个初入前端的小“码农”所写，若有不对的地方，请大家指正。