CSS完成三角形-html教程-PHP中文网

通过设置div的border属性，来实现！

将div的height和width属性分别设置为0px，将4边的border值设置为一样的宽度，通过调节边框的颜色课看到效果。

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> <span style="color: #888888;">20px</span> solid red</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border-right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px solid gray</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px solid pink</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span>

登录后复制

即可得到一个由4个三角形组成的正方形。如下图：

接下去，只要设置将另外3边的颜色去掉就可以得到三角形，此时设置border-color为transparent，此时就能得到三角形。

<span style="color: #000000;">div{height: 0px;width: 0px;
        border-top: 20px solid red;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }</span>

登录后复制

得到如下图：

另外，transparent为颜色值，等同于rgba(0,0,0,0)，透明度为0。然而在IE6中不支持，会默认显示如下图：

==================后续添加=====================

<span style="color: #800000;">div</span>{<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        border-top</span>:<span style="color: #0000ff;"> 100px solid red</span>;<span style="color: #ff0000;">
        border-left</span>:<span style="color: #0000ff;"> 100px solid transparent</span>;
    }

登录后复制

偶尔百度的时候看到，这样的设置会形成2个三角形，是之前没想到的，所以记录下来，嘿嘿，效果如下图：

==================后续添加（伪类）=====================

伪类（：：before和：：after）做三角形和对话框三角border

<span style="color: #800000;">
    div</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;"> 20px auto</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> red</span>}<span style="color: #800000;">
    div::after</span>{<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 100px solid transparent</span>;<span style="color: #ff0000;">
        border-bottom-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
        left</span>:<span style="color: #0000ff;"> 0px</span>;
    }

登录后复制

首先设置将伪类元素全部不可见，border的大小取决于height和width的大小，若是top和bottom的边框，则是height的一半。并且通过定位控制位置。效果如下图：

此处情况 after和before均可。

<span style="color: #800000;">div</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;"> 20px auto 0</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> red</span>}<span style="color: #800000;">
    div::after</span>{<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 250px solid transparent</span>;<span style="color: #ff0000;">
        border-bottom-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> -200px</span>;<span style="color: #ff0000;">
        left</span>:<span style="color: #0000ff;"> 0px</span>;
    }

登录后复制

当父元素的height和width大小不同时，以bottom部分为例，将border大小设置为父级元素width的一半，此时，三角形的顶部尖角会刚好处于父元素的中央，再通过调节top，让三角上移，注意此时top应设为负值。效果如下：

还有经常看到的微信对话框内的三角图形，佩服大神的思维，利用重叠两个元素来实现，类似于下图

代码如下：

<span style="color: #800000;">div</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;"> 10px auto</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;"> relative</span>;}<span style="color: #800000;">
    div:before</span>{<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 10px solid transparent</span>;<span style="color: #ff0000;">
        border-left-color</span>:<span style="color: #0000ff;"> #ccc</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
        left</span>:<span style="color: #0000ff;"> 100px</span>;
    }<span style="color: #800000;">
    div:after</span>{<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 9px solid transparent</span>;<span style="color: #ff0000;">
        border-left-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> 41px</span>;<span style="color: #ff0000;">
        left</span>:<span style="color: #0000ff;"> 100px</span>;
    }

登录后复制

此处可以合并很多代码，为了更直观就先这样先放着。

原理：通过设置两个伪元素，通过分别定位，相互重叠，留出1px的非重叠区域，从而达到效果。当然，可以调节top、left、right、bottom来控制三角的方向。