如何利用css绘制三角形

这篇文章给大家分享的是有关如何利用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;
       }</p> <p>

css的选择器有哪些

css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

感谢各位的阅读！关于“如何利用css绘制三角形”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！