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の幅の高さのパーセンテージ値を設定することで苦労することはできず,動的に設定するしかないことに注意する.