用CSS来画空心三角形的方法
画这里三角形的方法:
用CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:before和:after的样式偏移一个像素,就可以实现了
Html代码为:
<div id="favoriteOptionMenus" class="toolmenu">
<ul class="saveFilterWrap">
<li class="saveFilter">
<div class="form-group row">
<div class="col-xs-3 col-custom" id="saveSearchLabel"><label for="newFavoriteName">Save Search: </label></div>
<div class="col-xs-6 col-custom"><input class="form-control" id="newFavoriteName" maxlength="100" placeholder="Type filter name..."></div>
<div class="col-xs-3 col-custom" id="saveFilterButton">
<button id="btnSaveFavorite" class="btn btn-primary" style="margin-right: 10px;">
<span class="txt">Save</span>
</button>
</div>
</div>
</li>
<li class="separator"></li>
</ul>
<div class="form-group">
<label for="searchFilter">Saved Searches:</label><br />
<input class="form-control toolmenu" id="searchFilter" placeholder="Filter">
</div>
<ul class="toolmenu"></ul>
</div>
对应实现三角形的CSS代码为:
padding: 15px 10px;
width: 450px;
}
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -24px;
left: 89px;
padding: 0;
border-bottom: 12px solid #FFFFFF;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
display: block;
content: '';
z-index: 12;
}
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -26px;
left: 88px;
padding: 0;
border-bottom: 13px solid #9c9999;
border-top: 13px solid transparent;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
display: block;
content: '';
z-index: 10;
}