利用CSS制作三角形

时间：2014-07-27 21:57:20 阅读：220 评论：0 收藏：0 [点我收藏+]

标签：

在我们看到类似于这样的图片时：

我们一般都会想，哎，这还不简单，用一张图片就可以了。

的确，用图片可以很轻松地做到。不过我们接下来要讨论的是：

如何用css也作出这样的效果。

首先，我们来定义一个div:

然后给它增加一些样式：

.up{

width: 50px;

height: 50px;

background-color: red;

font-size: 0px;

line-height: 0px;

}

结果如图：

你TM逗我呢，这明明是正方形好吗！

好好好，别急，放下你手中的砖头，我们不妨设置一下它的边框。

.up{

width: 50px;

height: 50px;

background-color: red;

border:50px solid green;

font-size: 0px;

line-height: 0px;

}

然后就变成这样：

你这是在找死

好的好的，别急，我说最后一句：

我们尝试着把它的四个边框的颜色改成不一样。

.up{

width: 50px;

height: 50px;

background-color: red;

border-top: 50px solid green;

border-right: 50px solid yellow;

border-bottom: 50px solid blue;

border-left:50px solid black;

font-size: 0px;

line-height: 0px;

}

结果如下：

好像有点意思

好的，别急，我们再尝试着把div的宽度和高度都设置为0；

.up{

width: 0px;

height: 0px;

background-color: red;

border-top: 50px solid green;

border-right: 50px solid yellow;

border-bottom: 50px solid blue;

border-left:50px solid black;

font-size: 0px;

line-height: 0px;

}

结果：

好的，我们得到了四个三角形，

现在，我们要得到方向指向上的那个蓝色的三角形，所以我们把其他三角形的背景颜色设置成透明的，并且去掉之前设置的背景颜色：

.up{

width: 0px;

height: 0px;

border-top: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 50px solid blue;

border-left:50px solid transparent;

font-size: 0px;

line-height: 0px;

}

好的，掌声在哪里？

我知道你想说什么，我们仔细观察，发现其实上边框是不必要的，因为它不影响我们下面的那个三角形的大小和形状，所以我们去掉上边框，然后再调整一下背景颜色：

.up{

width: 0px;

height: 0px;

border-right: 50px solid transparent;

border-left:50px solid transparent;

border-bottom: 50px solid #6699cc;

font-size: 0px;

line-height: 0px;

}

完成了。

按照这种方法，我们可以制作四个方向上的三角形：

完整的代码：

html：

1 <div class="up"></div>
2 <div class="right"></div>
3 <div class="down"></div>
4 <div class="left"></div>

css：

 1 .up,.right,.down,.left{
 2   width: 0px;
 3   height: 0px;
 4   font-size: 0px;
 5   line-height: 0px;
 6 }
 7 .up{
 8   border-right: 50px solid transparent;
 9   border-left:50px solid transparent;
10   border-bottom: 50px solid #6699cc;
11 }
12 .right{
13   border-bottom: 50px solid transparent;
14   border-top:50px solid transparent;
15   border-left: 50px solid green;
16 }
17 .down{
18   border-top: 50px solid yellow;
19   border-right:50px solid transparent;
20   border-left: 50px solid transparent;
21 }
22 .left{
23   border-right: 50px solid red;
24   border-top:50px solid transparent;
25   border-bottom: 50px solid transparent;
26 }

完整的效果图：

来自为知笔记(Wiz)

利用CSS制作三角形

标签：

原文地址：http://www.cnblogs.com/iceseal/p/3871310.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行