td标签内的css纯箭头

我有一张桌子。在那张桌子里面有一些td有类“箭头”。对于有这个类的td，我想在该td的左边框上放一个箭头（三角形）。我只想用CSS来实现这一点。请注意，我希望箭头从顶部边界下方开始，并在底部边界之上结束。我试图应用几个在互联网上找到的“纯CSS箭头教程”，但我没有设法使它在td上工作。我希望我很清楚，我希望有人可以帮忙。预先感谢您的回复。干杯。马克。td标签内的css纯箭头

http://cssdesk.com/PzASe

我的HTML：

<table> 
    <tr> 
    <td>td1</td> 
    <td class="arrow">td2</td> 
    <td class="arrow">td three</td> 
    </tr> 
    <tr> 
    <td>td4</td> 
    <td class="arrow">td five</td> 
    <td class="arrow">td6</td> 
    </tr> 
</table>

我的CSS：

table{ 
    border-spacing: 0px; 
    border-collapse: collapse; 
    text-align:center; 
    vertical-align:middle;} 

td{ 
    padding:10px; 
    border:1px solid purple;} 

.arrow:before { 
    content:''; 
    position: relative; 
    top: 0; 
    left: -10; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-left: 5px solid black; 
}

来源

2012-02-24 Marc

什么是您的目标受众与此大多数CSS技术绘制形状像三角形涉及之类的东西插入新的元素，和先进的CSS属性（阅读：不工作在IE中），我会建议咬住子弹，并使用老式的背景图像。

如果你是在做一个概念验证，并且你不关心访问者使用什么浏览器，看着this tutorial on CSS tricks？

你需要插入一个<div>到那些细胞，然后应用这样的造型：

.arrow div { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid blue; 
}

来源

2012-02-24 14:57:18 chipcullen

你好chipcullen。我想避免这种解决方案，但我意识到我不能这样做。虽然我对结果并不满意。它看起来并不平滑：http://cssdesk.com/Kg8dx – Marc 2012-02-24 15:32:40

是的，在这个尺寸下，可能很难让它呈现流畅，因为您依靠压扁CSS边框。这依赖于浏览器渲染引擎，它不会知道“反锯齿” - 这将需要顺利渲染。但是，如果您使用背景图片，则可以渲染带有三角形的边框，实际上，在TD中没有左边框。这样三角形将被平滑地渲染（在你的图像编辑器中），但你会得到这种效果。那有意义吗？ – chipcullen 2012-02-24 15:39:48

实际上，如果我将背景颜色设置为等于三角形边框颜色，它看起来会更平滑......所以我会坚持我认为的解决方案。 – Marc 2012-02-24 15:45:20

试试这个CSS。你的td是中心对齐，在你的箭头之前添加了奇怪的空间。？（看到它在这里的行动css code

table{ 
    border-spacing: 0px; 
    border-collapse: collapse; 
    text-align:center; 
    vertical-align:middle;} 

td{ 
    padding:10px; 
    border:1px solid purple;} 

.arrow:before { 
    content:''; 
    position: relative; 
    top: 0; 
    left: -10; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-left: 5px solid black; 
} 
.arrow { 
    text-align:left; 
}

来源

2012-02-24 14:56:25

你好Andei。感谢对齐，但这不是真的问题。问题是，箭头显示不正确。无论如何感谢... – Marc 2012-02-24 15:30:58

td标签内的css纯箭头

回答

相关问题