使用JQuery在div的底部添加一个三角形

Question

我有一个长div，我希望通过在底部附加一个三角形来设计样式。我怎么能只使用JQuery和CSS呢？

$(".mini-filter-xs").prepend("<div class='filter-flag' style='width=100%; background-color:#37BDD1'>Hello There! <diV>");

Answer 1

试试这个：CSS Tricks - CSS Triangle

CSS三角形（向上箭头）：

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

jQuery的：

var divTriangle = $("<div/>").addClass("arrow-up");
// Append divTriangle to your bottom element
$("#yourBottomElement").append(divTriangle);