CSS不在父元素中时隐藏元素

Question

I have used jQuery and CSS to create a cool effect, where arrows fly across the screen inside of a large triangle. The problem is that I only want the moving arrows to be visible when they are inside the triangle. Even if one pixel of the arrow is inside the triangle, that part should become visible.

Demo: http://jsfiddle.net/A4dc7/

CSS:

.arrow_first {
    position: absolute;
    top: -108px;
    left: -142px;
    border-left: 44px solid transparent;
    border-right: 25px solid transparent;
    border-top: 60px solid white;
    z-index: 10;
}
.arrow_second {
    position: absolute;
    top: -229px;
    left: -213px;
    border-left: 26px solid transparent;
    border-right: 14px solid transparent;
    border-top: 40px solid white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    /* IE 9 */
    -webkit-transform: rotate(-5deg);
    /* Safari and Chrome */
    z-index: 7;
}
.arrow_third {
    position: absolute;
    top: -280px;
    left: -202px;
    border-left: 7px solid transparent;
    border-right: 5px solid transparent;
    border-top: 12px solid white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    /* IE 9 */
    -webkit-transform: rotate(-5deg);
    /* Safari and Chrome */
    z-index: 5;
}
.arrow_fourth {
    position: absolute;
    top: -116px;
    left: -111px;
    border-left: 21px solid transparent;
    border-right: 7px solid transparent;
    border-top: 28px solid white;
    z-index: 10;
}
.arrow_five {
    position: absolute;
    top: -200px;
    left: -173px;
    border-left: 14px solid transparent;
    border-right: 4px solid transparent;
    border-top: 21px solid white;
    z-index: 8;
}
.arrow_six {
    position: absolute;
    top: -294px;
    left: -257px;
    border-left: 31px solid transparent;
    border-right: 20px solid transparent;
    border-top: 42px solid white;
    z-index: 8;
}

I think it should be done with $.parent on jQuery, but I don't know how to id.

Answer 1

This will not work the way you want.
Usually, to make sure a child element is contained visually by the parent, you need to set overflow:hidden; to the parent element. In your case you use height:0; width:0; height:0; width:0; for your parent and you just have borders to depict your element... no dice with that one AFAIK, cause setting overflow to hidden on an 0x0 px parent - will not make visible your child elements.