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

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：

优点：

缺点：

相关问题