箭头背景怎么做_html/css_WEB-ITnose-html教程-PHP中文网

箭头背景怎么做_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:19:13

原创

1482人浏览过

像http://qa.tourizz.com/newui/latest/today/news-and-promotions这个地址，左侧带箭头的背景怎么做啊，箭头在灰色背景的外面就。选中或者hover的时候背景变成这种黄色箭头。你们觉得怎么做好啊？
现在是用css做的，箭头和矩形框衔接总是有偏差，能看出来间隙。

回复讨论(解决方案)

html5新特性，把一个矩形翻转45度就是三角形了，三角形显示在矩形右边于是就成了一个箭头形状

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

引用 1 楼 wzs_xyz 的回复: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;}

登录后复制

我是搞不懂它那个为什么要用旋转。那是正方形的对角线，还存在根号的问题。
直接用border 也能画三角
XML/HTML code?1

arrow

CSS code?12345678910111213141516#arrow { width: 100px; height: 30px; background:……

我是搞不懂它那个为什么要用旋转。那是正方形的对角线，还存在根号的问题。
直接用border 也能画三角
XML/HTML code?1

arrow

CSS code?12345678910111213141516#arrow { width: 100px; height: 30px; background:……
谢谢高人，我试了图片和旋转都不行，就这个方法行。
但是我不明白为什么这样就能出来三角形？

已经明白了，谢谢

大家都在看：

CSS背景图像与背景颜色叠加及定位：实用教程掌握CSS：实现背景图全屏覆盖与导航栏右对齐 CSS实现文本背景镂空效果：利用 mix-blend-mode 揭示父元素背景动态生成带随机背景色的表格并限制追加次数的JavaScript教程 html如何设置壁纸_HTML背景壁纸（body背景图）设置方法