CSS3—三角形

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3—三角形相关的知识，希望对你有一定的参考价值。

话不多说看效果：演示效果，runjs

技术分享

1.加了宽高和border，边用不同颜色显示，每条边都是一个梯形

2.去掉宽高，每条边都是三角形

3.只显示其中一条边就是不同的三角形了,是不是很简单，改变border四条边宽度试试吧~

上述代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>css3—三角形</title>
    </head>
    <style>
        .dib{display: inline-block;}
        .triangle0{
            width:40px;
            height:40px;
            border-top:40px solid yellow;
            border-right:40px solid black;
            border-bottom:40px solid pink;
            border-left:40px solid red;
        }
        .triangle1{
            width:0px;
            height:0px;
            border-top:40px solid yellow;
            border-right:40px solid black;
            border-bottom:40px solid pink;
            border-left:40px solid red;
        }
        .trianglet{
            width:0;
            height:0;
            border-top:40px solid yellow;
            border-right:40px solid transparent;
            border-left:40px solid transparent;
            border-bottom:40px solid transparent;
        }
        .triangler{
            width:0;
            height:0;
            border-top:40px solid transparent;
            border-right:40px solid black;
            border-bottom:40px solid transparent;
            border-left:40px solid transparent;
        }
        .triangleb{
            width:0;
            height:0;
            border-top:40px solid transparent;
            border-right:40px solid transparent;
            border-bottom:40px solid pink;
            border-left:40px solid transparent;
        }
        .trianglel{
            width:0;
            height:0;
            border-top:40px solid transparent;
            border-right:40px solid transparent;
            border-bottom:40px solid transparent;
            border-left:40px solid red;
        }
    </style>
    <body>
        <div class="triangle0 dib"></div>
        <div class="triangle1 dib"></div>
        <div class="trianglet dib"></div>
        <div class="triangler dib"></div>
        <div class="triangleb dib"></div>
        <div class="trianglel dib"></div>
    </body>
</html>

希望读到这里对您有所帮助，错误请指正，文章不定期更改或更新，转载请注明出处，方便溯源。

以上是关于CSS3—三角形的主要内容，如果未能解决你的问题，请参考以下文章

CSS3—三角形

用CSS3和伪元素绘制三角形

酷酷的CSS3三角形运用

为啥保守光栅化无法为某些三角形调用片段着色器？

为啥这个 CSS 片段可以画一个三角形？ [复制]

css3怎样在HTML网页写三角形