箭头背景怎么做
像http://qa.tourizz.com/newui/latest/today/news-and-promotions这个地址,左侧带箭头的背景怎么做啊,箭头在灰色背景的外面就。选中或者hover的时候背景变成这种黄色箭头。你们觉得怎么做好啊?
现在是用css做的,箭头和矩形框衔接总是有偏差,能看出来间隙。
[解决办法]
html5新特性,把一个矩形翻转45度就是三角形了,三角形显示在矩形右边于是就成了一个箭头形状
[解决办法]
<div id="arrow">arrow</div>
#arrow {
width: 100px;
height: 30px;
background: #ec8b46;
position: relative;
}
#arrow:after {
content: ' ';
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #ec8b46;
position: absolute;
left: 100px;
}