如何用css画出三角形

时间 2020-02-23

标签如何 css 画出三角形栏目 CSS 繁體版

原文原文链接

在平时的开发中咱们常常要使用到小三角，咱们除了使用切出来的图案，还有其余方式来实现这个小三角吗？答案是确定的，只要经过border这个css属性就能够简单实现啦。css

下面让咱们一步步来看下是如何实现的。html

首先咱们来看以下代码浏览器

<style type="text/css">
    .triangle_test{
        width:50px;
        height: 50px;
        border-width: 15px;
        border-color: red green black blue;
        border-style: solid;
}
    .triangle_test1{
        width:100px;
        height:100px;
        border-width: 15px;
        border-color: red green black blue;
        border-style: solid;
}
</style>
<body>
    <div class="triangle_test"></div>
    <p>
        <span class="triangle_test1"></span>
        <s class="triangle_test1"></s>
    </p>
</body>

显示结果：app

可是若是咱们把width 和heigth设置成为0那又变成啥了？ide

看图可知，对于行内元素width和heigth并不起效果的，因此在triangle_test1中咱们须要使用到spa

font-size:0这个css属性来设置行内元素的高度..net

.triangle_test1{
        width:0;
        height:0;
        border-width: 15px;
        border-color: red green black blue;
        border-style: solid;
        font-size:0;
}

到这一步咱们就应该知道三角形该怎么实现了吧。3d

有人说那我只设置border-top的属性，只让踏一个显示不就行了么？真的是这样吗？orm

然而事实是这样并不能实现。这里经过一个小例子来解释htm

1.1 设置相邻边框可见

.triangle_1{
    width:100px;
    height: 100px;
    border-width:20px;/* 20px 0 0;*/
    border-style: solid;
    border-color: red green blue black;
}

显示出来是这样子的，红色边框显示为梯形

.triangle_1{
    width:100px;
    height: 100px;
    border-width:20px 20px 0 0;/*这里有修改*/
    border-style: solid;
    border-color: red green blue black;
}

看到了吗，红色并非显示为梯形，黑色不显示的话，他会把部分成色区域覆盖，规律一看就知。

因此使另外三边变为透明便可实现小三角。

2.设置边框颜色透明度

.triangle2{/*兼容各个浏览器*/
    width: 0;
    height: 0;
    border-width: 10px;
    border-style:solid; /*dashed dashed dashed/*
    border-color: red transparent transparent transparent;

    font-size:0;
}

可是这个就会致使不能兼容ie6如下的浏览器，由于不识别transparent属性。

因此这里用到了一个ie6如下浏览器的特色就是border-style:dashed这个属性

能够参考文章 http://it.chinawin.net/application/article-180df.html

因此最终的结果为

.triangle2{ /*兼容各个浏览器*/
    width: 0;
    height: 0;
    border-width: 10px;
    border-style:solid dashed dashed dashed;
    border-color: red transparent transparent transparent;
    font-size:0;
}

--------------------------------------------------------------------------------

以上只有上下左右三角的画法，接下来咱们简单说下左上角三角的画法

这里就能够用到上述文中1.1中的样式

.triangle_1{
    width:0;//将width和heigth设置为0
    height: 0;
    border-width:20px 20px 0 0;
    border-style: solid;
    border-color: red green blue black;
}

这样咱们只要设置border-style:solid dashed dashed dashed;

border-color:red transparent transparent transparent;便可获得红色的左上箭头