首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

箭头背景如何做

2013-03-06 
箭头背景怎么做 像http://qa.tourizz.com/newui/latest/today/news-and-promotions这个地址,左侧带箭头的

箭头背景怎么做
 像http://qa.tourizz.com/newui/latest/today/news-and-promotions这个地址,左侧带箭头的背景怎么做啊,箭头在灰色背景的外面就。选中或者hover的时候背景变成这种黄色箭头。你们觉得怎么做好啊?
现在是用css做的,箭头和矩形框衔接总是有偏差,能看出来间隙。
[解决办法]
html5新特性,把一个矩形翻转45度就是三角形了,三角形显示在矩形右边于是就成了一个箭头形状
[解决办法]

引用:
引用:html5新特性,把一个矩形翻转45度就是三角形了,三角形显示在矩形右边于是就成了一个箭头形状
 现在就是这么做的啊,旋转后三角形的底边和左侧矩形的高度不一致,所以总是有间隙。

做得麻烦且不兼容,还不如用背景图片
[解决办法]
我是搞不懂它那个为什么要用旋转。那是正方形的对角线,还存在根号的问题。
直接用border 也能画三角
<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;
}

热点排行