在CSS中绘制三角形

这个问题在这里已经有了答案:

  • CSS三角形如何工作? 18个答案

  • CSS边框实际上有对角线边缘。

    插图:

    -------/
    |       |
    |       |
    |       |
    /-------
    

    所以border-right看起来像这样:

    /
    |
    |
    |
    
    

    height:0pxborder-right也没有高度,因此它看起来像这样:

    /
    
    

    现在如果你使用下面的CSS:

    #triangle-left{ 
        width: 0; 
        height: 0; 
        border-top: 50px solid transparent; /* this will fill the top gap */
        border-right: 100px solid red; /* this will be the red triangle */
        border-bottom: 50px solid transparent; /* this will fill the bottom gap */
    }
    

    你会得到:

    CSS三角形

    指向左侧的三角形。

    链接地址: http://www.djcxy.com/p/89491.html

    上一篇: Drawing a triangle in CSS

    下一篇: CSS border triangle point right