利用CSS画三角形原理

下面介绍CSS画三角形的原理

一、首先画一个div,给它宽高和背景颜色。再加上四条边的边框。

利用CSS画三角形原理_第1张图片
利用CSS画三角形原理_第2张图片

二、div的width、height置零,看看效果。(注意,这里把div的背景颜色也去掉。因为背景颜色是扩展到边框的,如果不去掉背景颜色,那么下面背景颜色会显示在透明的边框上。)

利用CSS画三角形原理_第3张图片

三、下面把左、右边框变成透明

利用CSS画三角形原理_第4张图片

四、去掉下边框。下面是等腰三角形

利用CSS画三角形原理_第5张图片

CSS三角形原理是:元素高度宽度为0,且没有下边框,左右边框透明即可。

要想画直角三角形。直接去掉右边框即可。

利用CSS画三角形原理_第6张图片

参考文献:

https://www.zhihu.com/question/35180018

你可能感兴趣的:(利用CSS画三角形原理)