浅谈css边框属性border（3） – border的三角制作

浅谈css边框属性border（1）—border的属性介绍

浅谈css边框属性border（2）—border的一般使用

浅谈css边框属性border（3）—border的三角制作

浅谈css边框属性border（4）—border的一些使用技巧

今天就谈谈用border去制作三角的方法。

一、先解释一下下面用的到的知识

1、transparent是透明的意思

2、角度是反的，top的时候三角是往下的，以此类推

3、你只要控制border-xxx-color就可以了

4.高度和宽度必须是0

下面是咱们的代码：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<p><br/>注意：上面四个三角div的想用的CSS为如下</p>
<p>1、border:10px solid transparent; border-top-color:#000;</p>
<p>2、border:10px solid transparent; border-right-color:#da4939;</p>
<p>3、border:10px solid transparent; border-left-color:#cb7832;</p>
<p>4、border:10px solid transparent; border-bottom-color:#a6e22e;</p>
<style type="text/css">
    .div1,.div2,.div3,.div4{ height:0; width:0;}
    .div1{ border:10px solid transparent; border-top-color:#000;}
    .div2{ border:10px solid transparent; border-right-color:#da4939;}
    .div3{ border:10px solid transparent; border-left-color:#cb7832;}
    .div4{ border:10px solid transparent; border-bottom-color:#a6e22e;}
</style>

所有的浏览器显示的都一样，只有很微小的区别，详情看下面的图：

所有浏览器都是一样的，咱们对于css border制作三角就不需要兼容写法了，可以大胆的使用了，哈哈

二、咱们再打开以下脑洞，这次就把border的四个border-width改变试试

代码如下：

<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<p><br/>注意：上面四个三角div的想用的CSS为如下：</p>
<p>1、border:10px solid transparent; border-top-color:#000; border-top-width:30px;</p>
<p>2、border:10px solid transparent; border-right-color:#da4939; border-top-width:30px;</p>
<p>3、border:10px solid transparent; border-left-color:#cb7832; border-top-width:30px;</p>
<p>4、border:10px solid transparent; border-bottom-color:#a6e22e; border-top-width:30px;</p>
<style type="text/css">
    .div5,.div6,.div7,.div8{ height:0; width:0;}
    .div5{ border:10px solid transparent; border-top-color:#000; border-top-width:30px;}
    .div6{ border:10px solid transparent; border-right-color:#da4939; border-top-width:30px;}
    .div7{ border:10px solid transparent; border-left-color:#cb7832; border-top-width:30px;}
    .div8{ border:10px solid transparent; border-bottom-color:#a6e22e; border-top-width:30px;}
</style>

得到的是这样的：

他们的形状，有点对不一样的。

我们可以得出结论：

1、如果是用一个面显示且宽度大的话会等角三角形拉长（二（1））

2、如果是两边（比如right的top/bottom、left的top/bottom等等），三角的对应角会拉长（二（2、3））

3、如果加大的是对立面的，那就三角的大小没有变化，倒是位置会变（二（4））

有可能这样解释大家会有点懵，所以我做了一个demo-》css border制作三角

文章所使用的demo-》本文用到的CSS+html代码