网站设计中经常会用到一些简单的几何图形,如三角形、正方形、梯形。那么我们来看看三角形是怎么实现的。
我们先来创建一个宽度和长度为100px的div,并把四条边的宽度也设置为100px,同时各自设置一种颜色。
<!DOCTYPE HTML>
<html>
<head>
<style>
.one{
width: 100px;
height: 100px;
border-top: 100px solid red;
border-bottom: 100px solid blue;
border-left: 100px solid #111;
border-right: 100px solid #ccc;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
运行结果:
那我们把border-top给注释了看会怎样
.one{
width: 100px;
height: 100px;
/*border-top: 100px solid red;*/
border-bottom: 100px solid blue;
border-left: 100px solid #111;
border-right: 100px solid #ccc;
}
运行结果:
上图显示的是border-top被注释的结果,试想一下,不注释而改为设置transparent呢?
.one{
width: 100px;
height: 100px;
border-top: 100px solid transparent;
border-bottom: 100px solid blue;
border-left: 100px solid #111;
border-right: 100px solid #ccc;
}
运行结果:
是不是发现了一些规律…
但是显示的结果中都是梯形,内有出现三角形,该怎么解决呢?
我们再来试试把div的宽度和高度设置为0px
.one{
width: 0;
height: 0;
border-top: 100px solid red;
border-bottom: 100px solid blue;
border-left: 100px solid #111;
border-right: 100px solid #ccc;
}
运行结果:
看,出现三角形,但是有四个,我们需要把另外三个去掉。
.one{
width: 0;
height: 0;
border-top: 100px solid red;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
/*border-right: 100px solid #ccc;*/
}
运行结果:
我们在改变一下代码,还可以调换一下三角形的角度
.one{
width: 0;
height: 0;
border-top: 100px solid red;
/*border-bottom: 100px solid transparent;
border-left: 100px solid transparent;*/
border-right: 100px solid transparent;
}
运行结果: