1、简单三角形的实现
使用CSS中的border(边框)即可实现如下所示的三角形:
实现原理如下:
首先为元素添加border:
<div class="big"></div>.big{width: 100px;height: 100px;border: 3px solid plum;}
效果图如下:
这是我们平常使用border时看见的普遍的情况,大家理所当然认为border是由矩形边框组成,实际上,元素的border是由三角形组合而成,为了验证这个结论,可以增大border的宽度,并为各border边设置不同的颜色:
.big{width: 100px;height: 100px;border: 50px solid;border-color: plum pink paleturquoise peachpuff;}
效果图如下:
将div宽高置为0会发生怎样神奇的事情呢???
.big{width: 0px;height: 0px;border: 50px solid;border-color: plum pink paleturquoise peachpuff;}
效果图!!!
我们惊奇的发现,此时的元素由四个三角形拼接而成,为实现最终效果,可以保留一边,将剩余的边框设置成白色或者透明色,为了节省空间,可以将上下左右任意一边的border边框置为0。
.big{width: 0px;height: 0px;border-width: 82px 82px 0 82px;border-style: solid;border-color: plum transparent transparent transparent;position: relative;}
效果图如下:
2、边框三角形的实现
带边框的三角形是指为三角形添加其它颜色的边框,由于不能继续通过为已有三角形设置border的方法来为其设置边框,所以这里采用绝对定位和相对定位来实现如下效果。
大三角形采用绝对定位,小三角形需要参照大三角形的位置,所以采用相对定位,之后利用相对定位的四个属性top、bottom、left、right来调整小三角形的位置。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.big{width: 0px;height: 0px;border-width: 82px 82px 0 82px;border-style: solid;border-color: plum transparent transparent transparent;position: relative;}.small{width: 0px;height: 0px;border-width: 76px 76px 0 76px;border-style: solid;border-color:pink transparent transparent transparent;position: absolute;bottom: 4px;left: -76px;} </style></head><body><div class="big"><div class="small"></div></div></body></html>