您当前的位置: 站长圈 > 技术文章 > 网页前端 > 用css制作一个小三角——用css画图(一)

用css制作一个小三角——用css画图(一)

来源:站长圈 作者:adminzzq 点击: 0
有时候我们的页面中需要一个小三角,但是我们一时又没有这样的图片,怎么办?凉拌?O(∩_∩)O哈哈~我们只能看着办呗。用现有资源css来“画”一个吧。

\

    我们先来看一段代码:
    .box{ width:50px; height:50px; border-top:20px solid green; border-right:20px solid orange; border-bottom:20px solid blue; border-left:20px solid red;}
有一个叫box的盒子,它宽高都是50,但是分别给它们不一样的边框颜色,效果如图所示:

\

    然后,我们把它的宽、高慢慢减小,一直到宽高都为0(加个溢出隐藏,确保效果),看看现在是什么情形呢:

\

 

    看到这里,你应该已经看出来了吧。如果我们把上、右、下三条边框的颜色设置成和页面背景色相同,我们不就得到了一个红色的小三角了吗,那么我们赶快试一试吧。  

   .box{ width:0; height:0px; border:20px solid #fff;border-left:20px solid red; overflow:hidden; }


我们再发挥一下想象,看看下面这些图形是怎样用css“画出来的”?

\