play with arrow

之前 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 宽高百分比数值一劳永逸，只能动态设置了。