Мне нужно добавить правый треугольник в ячейку.
Как это сделать?
Я попытался добавить span и значок внутри диапазона, но он не работает
<span style="position: relative;float:right;top:-30px;">@Html.ImageContent("triangle_bonus.png", "")</span>
Мне нужно добавить правый треугольник в ячейку.
Как это сделать?
Я попытался добавить span и значок внутри диапазона, но он не работает
<span style="position: relative;float:right;top:-30px;">@Html.ImageContent("triangle_bonus.png", "")</span>
Использование CSS-треугольников:
У вас в основном есть элемент высоты 0, 0 и используйте границы для построения треугольника. Поскольку линия между границами (например, между верхним и левым) диагональна, вы можете создавать с ней красивые, сплошные цветные треугольники!
<table border="1">
<tr>
<td class="note">Triangle!</td>
<td>No Triangle!</td>
</tr>
</table>
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> */
<span>
в своем HTML, вместо того чтобы полагаться на :after
.Нашел этот вопрос через Google и столкнулся с проблемами, поэтому я добавлю это здесь, несмотря на возраст оригинального сообщения.
Ответ Мадары работает в большинстве браузеров и работает везде вне таблицы во всех браузерах. Но, как упоминалось в комментариях, этот пример не работает в Firefox.
Там очень старый билет в 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;
}
Я обнаружил, что можно было достичь без внутреннего <div>
, но только тогда, когда <td>
был пуст, что, вероятно, не помогает.
Сделать текст ячейки внутри div это хорошая идея. но если вы просто добавили дополнительный div для СТРЕЛКИ не для текста. потому что он создает проблему, когда td
задает ширину и высоту, а текст остается в TOP с 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 height or can put more text
</td>
</tr>
</tbody>
</table>