如何爲表格製作成角度的邊框。

我搜索了高低，發現了一些東西，但沒有涉及到我需要的東西。如何爲表格製作成角度的邊框。

我需要這個： what I need

而且我現在有這樣的： what I have

我的問題是，如何讓第一右側邊框的角度通過CSS所示。

現在，我把它作爲一個表格（我知道，表格是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或者是表罰款？如果一張桌子很好，我會怎麼去編碼呢？多謝你們！

來源

2015-07-10 user2232926

我不會用這個表......太複雜/ –

從語義角度來看，該內容不屬於表（至少添加'role =「presentation」'），而是屬於無序列表。從實際的角度來看，您可能比表格更容易設定列表的樣式。 – steveax

找到了一些只使用CSS-HTML。看到我的更新 –

嘗試向您的第一個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

UPDATE

發現一個很酷的網站，讓你想要什麼，只有CSS-HTML（無圖像）：

http://cssarrowplease.com/

來源

2015-07-10 22:02:18

必須接受這個作爲adminXVII最接近它的答案。 – user2232926

由於adminXVII，看起來像會工作。我會在稍後嘗試。再次感謝你的幫助。 – user2232926

試試這個：

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/

祝你好運。

來源

2015-07-10 21:44:24

我看到你們正在用圖像做什麼，而且它非常聰明。但我覺得應該有一個更簡單的方法。嗯，我可能只需要用圖像破解它。 Thx全部爲您提供幫助。如果任何人有更好的建議，我想所有的耳朵。現在，看起來像一個img黑客。 :) – user2232926

如何爲表格製作成角度的邊框。

回答

相關問題