纯CSS绘制三角形箭头效果

/ create an arrow that points up /
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; / left arrow slant /
border-right: 5px solid transparent; / right arrow slant /
border-bottom: 5px solid #2f2f2f; / bottom, add background color here /
font-size: 0;
line-height: 0;
}
/ create an arrow that points down /
div.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-: 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
/ create an arrow that points left /
div.arrow-left {
width: 0;
height: 0;
border-bottom: 5px solid transparent; / left arrow slant /
border-: 5px solid transparent; / right arrow slant /
border-right: 5px solid #2f2f2f; / bottom, add background color here /
font-size: 0;
line-height: 0;
}
/ create an arrow that points right /
div.arrow-right {
width: 0;
height: 0;
border-bottom: 5px solid transparent; / left arrow slant /
border-: 5px solid transparent; / right arrow slant /
border-left: 5px solid #2f2f2f; / bottom, add background color here /
font-size: 0;
line-height: 0;
}

div.tooltip {
/ tooltip content styling in here; nothing to do with arrows /
}
/ shared with before and after /
div.tooltip:before, div.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; / arrow size /
}
/ these arrows will point up /
/ -stacked, smaller arrow /
div.tooltip:before {
border-bottom-color: #fff; / arrow color /</p> <p> / positioning /
position: absolute;
: -19px;
left: 255px;
z-index: 2;
}
/ arrow which acts as a background shadow /
div.tooltip:after {
border-bottom-color: #333; / arrow color /</p> <p> / positioning /
position: absolute;
: -24px;
left: 255px;
z-index: 1;
}