巧用边框代码制作三角形
2018/07/13 16:55 分类: 技术交流 浏览:65
我们先来看一组效果:
大家看上去是不是觉得这不就是四张图片嘛,用ps分分钟就画出来了。如果你是这样认为的话那就错了!!!对,它们不是用ps画的,而是用盒子的边框写出来的。那接下来带大家一起来看看是如何实现的。
在这里咱们要使用到盒子的一个属性,那就是border。先看一个正常的盒子的写法:
效果如下图:
接下来修改代码:
好,接下来我们来实现第一个效果:
聪明的你一定看出门道了,咱们只需要设置边框不同方向的颜色即可,接下来看看后面几个形状的实现代码:
好,到此所有的效果都实现了,要让它们显示在一行,那么只需要在div选择器中加入一个浮动属性就好了。
总结一下,实现效果的要点主要有两个:
1 把宽度和高度设置为0;
2 为特定方向写颜色,其它方向设置为透明即可。
感谢源码时代教学讲师提供此文章!
本文为原创文章,转载请注明出处!
赞 0