CSS画出三角形

最新推荐文章于 2024-11-08 15:48:55 发布

原创最新推荐文章于 2024-11-08 15:48:55 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #border-radius #css三角形 #css实现三角形

CSS 专栏收录该内容

2 篇文章

订阅专栏

话不多说, 直切正题

/* 上箭头 */
div.arrow-up {
    width: 0px;
    height: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid blue;
    font-size: 0px;
    line-height: 0px;
}

/* 下箭头 */
div.arrow-down {
    width: 0px;
    height: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid yellowgreen;
    font-size: 0px;
    line-height: 0px;
}

/* left箭头 */
div.arrow-left {
    width: 0px;
    height: 0px;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 5px solid red;
    font-size: 0px;
    line-height: 0px;
}

/* 右箭头 */
div.arrow-right {
    width: 0px;
    height: 0px;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: 5px solid green;
    font-size: 0px;
    line-height: 0px;
}

div {
    margin-left: 100px;
    margin-top: 50px;
}

<body>
    <div class="arrow-up"></div>
    <div class="arrow-down"></div>
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>
</body>

效果图如下: