通过上一篇文章大家应该都知道border的本质了吧,不清楚的同学可以去看一下这篇博文
下来我们说一下怎么实现各种三角形吧,先来说一下我自己的思路
大家先看这张图片
看过上一篇文章的应该都不陌生这个是怎样产生的,
其实大家仔细观察,相信不难看出我们中间区域设置的是各个梯形的上底边,那么当我们设置中间区域width:0的时候,出现的上下两个梯形的上底边都为0了,即就是我们需要的上三角形和下三角形了,同理,设置height:0的时候,我们的左右两个梯形的上底边均为0,这样我们的左三角形和右三角形就出现,
下来我们就想办法实现三角形,首先我们去掉中间的白色区域部分,即设置高宽为0,效果如下
看到了吗,我们需要的各种三角形其实已经出来了,
上三角:只需要设置其他三个border边框的颜色为背景色即可,同理我们可以得到下三角,左三角以及右三角
现在我们做出来的都是直角的三角形,这是因为我们这是的border的宽度都是一样的,下来我们做一点不一样的
设置宽高不一样的时候就出现如上如所示的形状,首先每个三角形都不是等边直角三角了,其次,我们还可以让他两个边框都显示,即上图中的黄色和红色区域可以构成一个尖锐的三角形,当然了,你也可以随便组合.
我们可以利用这个做出一个简单的消息提示框,
结束语
我们可以利用border属性做出很多的例子,这里我就先介绍到这里,其中的好处,大家细细品味吧!!