利用CSS实现三角效果

实例一:三角箭头

思路:利用元素border设置边框,再用transform选择元素,实现三角箭头效果

原理:元素border可以分别设置

利用CSS实现三角效果_第1张图片

设置一组邻边显示,一组邻边不显示,达到直角效果,把color设置成transparent,不懂transparent的自行百度吧

利用CSS实现三角效果_第2张图片

再用transform旋转,这里是顺时针旋转了45°,根据自己需求设置就行了

利用CSS实现三角效果_第3张图片

 

Deom:

 

实例一:实心三角形

思路:利用元素border宽度撑起三角形,并把width和height设置成0px

原理:同上,元素border可以分别设置,不同的是实例一border是1px,而实心三角形就得宽点了

利用CSS实现三角效果_第4张图片

同样,把其他三边的color设置成transparent

利用CSS实现三角效果_第5张图片

 

demo:



 

小贴士:学会经常使用伪元素例如after或before来实现三角形

原文链接:http://www.webstr.top/post/9.html

你可能感兴趣的:(html)