play with arrow

iteye_4865

于 2010-10-14 22:40:29 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏： ui

本文链接：https://blog.youkuaiyun.com/iteye_4865/article/details/81935913

ui 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用双三角形重合绘制清新纯线条的方法，并提供了具体的CSS样式实现方案及动态调整技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前 taobaoUED 已经详细解释过三角形画法，利用双三角重合实现一个清新的纯线条还是挺不错的：

demo 清新线条窗口

关键是双三角的重和方法：

<div class="arrow_b">
        <div class="arrow_a">
        </div>
    </div>

用 a 盖着 b 即可：

 .arrow_b, .arrow_a {
        border: 10px solid red;
        border-color: red transparent transparent transparent;
        /*ie6 透明*/
        border-style:solid dashed dashed dashed;
        position: absolute;
        width: 0;
        height: 0;
        font-size: 0;
        /*窗口居中*/
        left: 50%;
        top: 100%;
    }

    .arrow_a {
        border-top-color: white;
        /*覆盖 b*/
        top: -11px;
        left: -10px;
    }

动态大小：

只需动态更新 a , b 三角形的大小，以及 b 的定位为 a 上方即可，注意由于 b 高宽为 0，则不能通过设置 a 宽高百分比数值一劳永逸，只能动态设置了。