如何在表格單元格中添加三角形

enter image description here

如何做到這一點？

我嘗試添加跨度和內跨度圖標，但它就會出差錯

<span style="position: relative;float:right;top:-30px;">@Html.ImageContent("triangle_bonus.png", "")</span>

來源

2013-01-24 Mediator

你能不能設置樣式=「背景：網址（@Html。 ImageContent（「triangle」））... position-attributes ...' – Kane

@Kane，現在試試謝謝 – Mediator

@Kane，謝謝。它的工作。請輸入回答 – Mediator

使用CSS Triangles:

你基本上有一個0高度，0寬度元素，並使用邊界構造三角形。因爲邊框之間的線（例如，頂部和左邊之間）是對角線，所以可以用它創建漂亮的純色三角形！

Here's an Example!

HTML：

<table border="1"> 
    <tr> 
     <td class="note">Triangle!</td> 
     <td>No Triangle!</td> 
    </tr> 
</table>

CSS：

td { 
    padding: 20px; 
} 
.note { 
    position: relative; 
} 
.note:after { /* Magic Happens Here!!! */ 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 0; 
    height: 0; 
    display: block; 
    border-left: 20px solid transparent; 
    border-bottom: 20px solid transparent; 

    border-top: 20px solid #f00; 
} /* </magic> */

優點：

沒有圖片！ - 含義，不需要額外的請求。
沒有額外的標記！ - 意思是說，你不會用非語義標記來拋棄你的HTML。
在各種尺寸上看起來不錯！ - 因爲它在瀏覽器中呈現，所以它在任何尺寸和任何分辨率下看起來都很完美。

缺點：

取決於僞元素 - 這意味着較低的版本的IE將不顯示的三角形。如果它很關鍵，那麼您可以稍微修改CSS，並在HTML中使用<span>，而不是依靠:after。

來源

2013-01-24 10:51:19

注意：在FF 18.0.1中，三角形顯示在整個表格的右上角，而不是表格單元格。 – Vloxxity

@Vloxxity：你做錯了什麼。你確定在實際元素上添加'position：relative;'？ –

我沒有做任何事情，我只是試過你的jsfiddle。 ^^ – Vloxxity

通過谷歌發現了這個問題，並遇到了問題，所以我會在這裏添加這個儘管原來的職位的年齡。

Madara的答案適用於大多數瀏覽器，並且可以在所有瀏覽器的表格之外的任何地方工作。但正如評論中提到的，這個例子在Firefox中不起作用。

有一個very old ticket in Bugzilla有關position:absolute;不工作在<td>元素。

主要解決方案是增加的內<div>：

HTML：

<table border="1"> 
<tr> 
    <td><div class="note">Triangle!</div></td> 
    <td>No Triangle!</td> 
</tr> 
</table>

CSS：

td .note { 
    padding: 20px; 
}

jsFiddle example

我的確發現沒有<div>，但只有當<td>爲空時纔有可能實現，這可能無濟於事。

來源

2014-01-21 11:53:23 TheShrew

在div裏面做單元文本是個好主意。但如果你只是把額外的div用於ARROW而不是文本。因爲td已給出寬度和高度，並且文字保持在頂部padding-top:20px;時會產生問題。

我找到了另一種解決方案，並在所有主要的瀏覽器進行測試（例如：IF和FF以及）

.arrow-right-1 { 
 
    position: absolute; 
 
    top: -1px; 
 
    right: -5px; 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-bottom: 10px solid red; 
 
    transform: rotate(45deg); 
 
} 
 

 
td { 
 
    border: solid 1px blue; 
 
    width: 160px; 
 
    height: 100px; 
 
    /* padding: 0px !important; */ 
 
    /* vertical-align: top; */ 
 
    position: relative; 
 
}

<table class="table"> 
 

 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="arrow-right-1"></div>you can increase or decrease the size of td's height or can put more text 
 
     </td> 
 

 
    </tr> 
 

 
    </tbody> 
 
</table>

來源

2016-01-04 14:31:05

如何在表格單元格中添加三角形

回答

HTML：

CSS：

優點：

缺點：

相關問題