CSS3实现三角形效果
2017-06-20 18:52
387 查看
原文:Magic of CSS border property
译文:不可思议的CSS border属性
译者:dwqs
在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。
1至5的demo演示(为了演示方便,对源代码改动了一下):http://jsfiddle.net/rt8cjtwq/embedded/result/
HTML:
效果:
HTML:
效果:(左上角的边框颜色是白色)
转载地址
译文:不可思议的CSS border属性
译者:dwqs
在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。
1、正三角形:
.triangle_up { height:0px; width:0px; border-bottom:50px solid #006633; border-left:50px solid transparent; border-right:50px solid transparent; }
2、倒三角形:
.triangle_down { height:0px; width:0px; border-top:50px solid #006633; border-left:50px solid transparent; border-right:50px solid transparent; }
3、左三角形
.triangle_left { height:0px; width:0px; border-left:50px solid #006633; border-top:50px solid transparent; border-bottom:50px solid transparent; float:left; }
4、右三角形
.triangle_right { height:0px; width:0px; float:left; border-right:50px solid #006633; border-top:50px solid transparent; border-bottom:50px solid transparent; }
5、十字街效果
.crossSquare { height:0px; width:0px; border-right:50px solid blue; border-top:50px solid gray; border-bottom:50px solid red; border-left:50px solid yellow; }
1至5的demo演示(为了演示方便,对源代码改动了一下):http://jsfiddle.net/rt8cjtwq/embedded/result/
6、方向箭头(突出效果,改动了源代码)
CSS:.triangle_left { height:0px; width:0px; border-left:50px solid #006633; border-top:50px solid transparent; border-bottom:50px solid transparent; /*float:left;*/ } .triangle_right { height:0px; width:0px; /*float:left;*/ border-right:50px solid #006633; border-top:50px solid transparent; border-bottom:50px solid transparent; }
HTML:
<div class="arrow"> <div class="triangle_right"></div> <div class="arrowLine"></div> </div> <div class="arrow"> <div class="arrowLine"></div> <div class="triangle_left"></div> </div>
效果:
7、制作一个Delicious Logo:
CSS:.delociousLogo { height:100px; width:100px; } .topleft { height:0px; width:0px; border-top:50px solid #FFFFFF; border-right:0px solid #FFFFFF; border-bottom:0px solid #FFFFFF; border-left:50px solid #FFFFFF; float:left; } .topright { float:left; height:0px; width:0px; border-top:50px solid #0000CC; border-right:0px solid #0000CC; border-bottom:0px solid #0000CC; border-left:50px solid #0000CC; } .bottomleft { float:left; height:0px; width:0px; border-top:50px solid #000000; border-right:0px solid #000000; border-bottom:0px solid #000000; border-left:50px solid #000000; } .bottomright { float:left; height:0px; width:0px; border-top:50px solid #999999; border-right:0px solid #999999; border-bottom:0px solid #999999; border-left:50px solid #999999; }
HTML:
<div class="delociousLogo"> <div class="topleft"></div> <div class="topright"></div> <div class="bottomleft"></div> <div class="bottomright"></div> </div>
效果:(左上角的边框颜色是白色)
转载地址
相关文章推荐
- CSS3绘制三角形,并实现翻转效果
- 使用CSS3 and jQuery 实现霓虹灯闪烁效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- CSS3实现的超酷页面过渡效果
- CSS3实现的超酷页面过渡效果
- CSS3 实现圆角效果
- 使用CSS3可以实现的五种很酷很炫的效果
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- CSS3 实现滚动字幕效果(即跑马灯)
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 使用Jquery,CSS3实现像GooglePlus那样的圆圈效果
- 用CSS3实现类似苹果桌面的有趣抖动效果
- 一个用 CSS3 样式加上 JS 实现了 alert 和 confirm的效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- CSS3下的渐变文字效果实现
- 2011年最新使用CSS3实现各种独特悬浮效果的教程
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)