028-86261949

当前位置:首页 > 技术交流 > 巧用边框代码制作三角形

巧用边框代码制作三角形

2018/07/13 16:55 分类: 技术交流 浏览:65

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