如何为表格制作有角度的边框。

Question

我搜索过高低，找到了一些东西，但没有任何东西与我需要的完全相关。

我需要这个：

我目前有这个：

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

现在，我把它作为一张桌子（我知道，桌子是2000年以来）。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

CSS就是：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我是否应该将此作为列表，就像我在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/

Answer 2

试试这个：

width: 250px;
height: 150px;
background-image: url('http://rgartists.com/wp-content/uploads/2014/04/icon-ios7-arrow-right-128.png');
background-repeat:no-repeat;
background-size: 250px 150px;

上传了一个示例JSFiddle示例，与您的示例类似。它在这里： http://jsfiddle.net/gHYsh/529/

祝你好运。