CSS-Tooltip-arrow

Bootstrap的bubble-arrow；

HTML

<div class="group">
    <p>矩形</p>
    <div class="rectangle"></div>
    <p>border矩形</p>
    <div class="rectangle hollow"></div>
    <p>纯border矩形(width=0,height=0)</p>
    <div class="rectangle border"></div>
    <div class="trangle-new"></div>
</div>
<div class="group">
    <p>等腰三角形</p>
    <div class="trangle trangle-up"></div><br></br>
    <div class="trangle trangle-down"></div><br></br>
    <div class="trangle trangle-left"></div><br></br>
    <div class="trangle trangle-right"></div><br></br>
    <div class="trangle-border"></div>
</div>
<div class="group">
    <p>斜三角形</p>
    <div class="oblique-trangle-bottom-left"></div><br></br>
    <div class="oblique-trangle-bottom-right"></div><br></br>
    <div class="oblique-trangle-top-left"></div><br></br>
    <div class="oblique-trangle-top-right"></div><br></br>
</div>
<div class="group">
    <p>Tool-Tips</p>
    <div class="event item">
        <div class="event-inner">
            <div class="event-content">TAKE DOWN</div>
            <div class="event-by">BY ALDO</div>
        </div>
        <div class="event-arrow">
            <div class="event-point"></div>
            <div class="event-time">4:49</div>
        </div>
    </div>
    <div class="event item">
        <div class="event-inner">
            <div class="event-content">TAKE DOWN</div>
            <div class="event-by">BY ALDO</div>
        </div>
        <div class="trangle-border">
            <div class="event-point"></div>
            <div class="event-time">4:49</div>
        </div>
    </div>
</div>

CSS

.group {
    width: 20%;
    float: left;
}
/* rectangle */
 .rectangle {
    width: 50px;
    height: 50px;
    background-color: burlywood;
}
.hollow {
    border-width: 15px 25px 35px 45px;
    border-color: green blue red grey;
    border-style: solid;
}
.border {
    width: 0;
    height: 0;
    border-width: 15px 25px 35px 45px;
    border-color: green blue red grey;
    border-style: solid;
}
/* trangle */
 .trangle {
    width: 0;
    border-color: transparent;
    border-style: solid;
    background-color: #fff;
    border: 19px solid #666;
}
.trangle-up {
    border-width: 0 19px 35px;
    border-bottom-color: #333333;
}
.trangle-down {
    border-width: 35px 19px 0;
    border-top-color: #333333;
}
.trangle-left {
    border-width: 19px 35px 19px 0;
    border-right-color: #333333;
}
.trangle-right {
    border-width: 19px 0 19px 35px;
    border-left-color: #333333;
}
.trangle-border {
    width: 0;
    border-color: transparent;
    border: 20px solid #666;
}
.trangle-border:before {
    content:"";
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    border-width: 20px 20px 0;
    border-color: #5a8f00 transparent;
}
.trangle-border:after {
    content:"";
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    margin-left: 8px;
    border-width: 12px 12px 0;
    border-color: #fff transparent;
}

.oblique-trangle-bottom-right {
}
.oblique-trangle-bottom-right:before {
    content:"";
    position: absolute;
    /* bottom: -30px; */
    border-style: solid;
    display: block;
    width: 0;
    /* right: 80px; */
    border-width: 0 50px 30px 0;
    border-color: transparent #333333;
}
.oblique-trangle-bottom-right:after {
    content:"";
    position: absolute;
    /* bottom: -30px; */
    border-style: solid;
    display: block;
    width: 0;
    /* right: 110px; */
    padding-left: 30px;
    border-width: 0px 20px 30px 0;
    border-color: transparent...