利用border做成三角形_border制作三角形

在前端开发中，和平时浏览的网页，如下图：

网页的三角形，除了利用图片之外，我们还可以利用border来做，我们知道border的每个便是个单独设置的，下面我们见用border来做成三角形。

html代码：

1.当我们对border的每条设置不同颜色：

效果：

2、通过demo可以看到border的相交的地方在45deg平分，当元素的width、和height属性呗设置为0的时候

效果如图：

3、这样我们就可以看到三角形了，尝试一下去掉两个边框，值保留上边和左边

效果如图：

这时候做三角形好像简单了，只要我们保留两个相邻边，把另外的一个设置为透明就可以了

这样我们就有一个直角三角形了，稍微修改一下

在通过不同修改样式，是可以得到多重多样的三角形

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com