Question

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

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; 
}

Answer 1

您的目标受众是什么？用于绘制像三角形这样的形状的大多数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;
 }

Answer 2

试试这个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;
}

css标签内的css纯箭头

2 个答案: