css制作简单的三角形

最新推荐文章于 2025-07-11 18:40:43 发布

原创最新推荐文章于 2025-07-11 18:40:43 发布 · 683 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

CSS 同时被 3 个专栏收录

15 篇文章

订阅专栏

HTML

14 篇文章

订阅专栏

css3

8 篇文章

订阅专栏

css简单做三角形

这里写图片描述

html

<div class="item-wrap">
        <div class="item">
            <ul class="img-list">
                                        <li>
                                            <div class="triangle"></div>
                                        </li>
                                        <li>
                                            <div class="triangle"></div>
                                        </li>
                                        <li>
                                            <div class="triangle"></div>
                                        </li>
                                        <li>
                                            <div class="triangle"></div>
                                        </li>
            </ul>
        </div>
    </div>

css

 li:nth-child(3) .triangle{
    border-bottom: 100px solid #ff8b00;
 }
.triangle{
    width: 0px;
    height: 0px;
    position: absolute;
    top:30px;
    left: 100px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;


}