html - 如何为表格制作 Angular 边框。

Question

我到处搜索并找到了一些东西，但没有找到与我真正需要的东西相关的东西。

我需要这个:

我现在有这个:

我的问题是如何使第一个右侧边框成为一个 Angular ，如通过 CSS 所示。

现在，我正在把它做成一张 table (我知道， table 都是 2000 年代的)。

<table class="issue-finder">
  <tr>
    <td class="first-child"><a href="#">Issue<br>Finder</a></td>
    <td><a href="#">P-12<br>Education</a></td>
    <td><a href="#">Higher<br>Education</a></td>
    <td><a href="#">Workforce<br>Outcomes</a></td>
    <td><a href="#">Health &amp; Human<br>Services</a></td>
  </tr>
</table>

CSS 是:

.issue-finder {
    width: 100%;
    text-align: center;
    height: 100px;
    background-color: #c2db73;
}
.issue-finder td.first-child {
    border-right: 1px solid #000000;
}
.issue-finder td {
    width: 15%;
    border-right: 1px solid #ffffff;
}
.issue-finder a {
    text-decoration: none;
    color: #000000;
}

我应该像我在 SO 上看到的一些示例那样将其作为列表来执行还是表格可以？如果表格没问题，我将如何对其进行编码？谢谢大家!

Answer 1

尝试向您的第一个 td 添加一个类，并在该类中将 background-image 设置为您的自定义箭头。喜欢:

.issue-finder td.first-child {
    border-right: 0px;
    /*your custom image*/
    background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Fl%C3%A8che_directionnelle.png/800px-Fl%C3%A8che_directionnelle.png);
    width: 20%; /*if you want it to be taller*/
}

JSFiddle

更新

找到一个很酷的网站，只用 CSS-HTML(没有图片)来制作你想要的东西:

http://cssarrowplease.com/