用css写三角形

在布局中，经常遇到一些三角形形状的按钮：

常用三角形形状

其实用html+css就能实现，很简单，代码如下：

第一种方法

html代码：

<!-- 向上 -->
<div class="top_triangle"></div>
<!-- 向下 -->
<div class="bottom_triangle"></div>
<!-- 向左 -->
<div class="left_triangle"></div>
<!-- 向右 -->
<div class="right_triangle"></div>

css代码

/*向上*/
        .top_triangle{
            width:0;
            height:0;
            border-bottom:30px solid green;
            border-right:30px solid transparent;
            border-left:30px solid transparent; 
        }
        /*向下*/
        .bottom_triangle{
            width:0;
            height:0;
            border-top:30px solid black;
            border-right:30px solid transparent;
            border-left:30px solid transparent;
        }
        /*向右*/
        .left_triangle{
            width:0;
            height:0;
            border-top:30px solid transparent;
            border-left:30px solid yellow;
            border-bottom:30px solid transparent;
        }
        /*向左*/
        .right_triangle{
            width:0;
            height:0;
            border-top:30px solid transparent;
            border-right:30px solid red;
            border-bottom:30px solid transparent;
        }

第二种方法

以上代码便是实现上下左右方向三角形的代码；然而其实不难发现，其实它们之间有个共同点，都是由border中的top、right、bottom、left实现的，因此我们还有一种写法，通过实现设置一个div的border，让其隐藏掉，再给其中一个方向颜色，该方向的三角形就能显现出来，比如实现向上方向的三角形的css代码：

 .top_triangle{
            width:0;
            height:0;
            //将其先隐藏掉，再显示。
            border:30px solid transparent;
            border-bottom:30px solid green; 
        }

其它方向的就相类似，就不一一举例了。

一点tips

如果认真尝试敲过这个代码的读者或许会发现，以第一种方法的例子比方，都给border设置了三个方向的值，好奇的人会想，只设置两个行或者一个行吗？敲敲就知道啦~

实践中告诉我，设置一个或者两个但设置相反方向上的border值的都不会显示出来，可以试试；但是如果两个中，不同方向上的两个值是会显示出来的，至于是什么形状，就看你选的方向了。实践出真知！

实现的基本理解（方便记）

图片中最左方的正方形css代码如下：

.all_triangle{
            width:0;
            height:0;
            border-top:30px solid black;
            border-left:30px solid yellow;
            border-right:30px solid red;
            border-bottom:30px solid green;
        }

加上在代码中出现最多的transparent（我理解隐藏掉），就不难理解，其实也就是将一个盒模型中的padding+content，用width+height都设置为零干掉，然后给让border隆重登场，设置相应的值，当然这些值都是必须的，然后呢，将要显现出来的显示，该隐藏的就隐藏，第一种方法中干脆就省略了一个（也只能是一个），至于大小颜色位置就随你设置了 。

延伸

css3中的border-radius，有个图案如下

应用蛮多的

其实这个的实现用border也行。代码如下：

.eatFace{
            width:0;
            height:0;
            border:30px solid red;
            border-radius:50%;
            border-right:30px solid transparent;
        }

至于原理，如果大家读懂了三角形的，这个不难理解。

最后，感谢读到最后的读者，纯属学习中的分享，望多多指教，寻求共同进步！