Как добавить треугольник в ячейку таблицы

Ответ 1

Использование CSS-треугольников:

У вас в основном есть элемент высоты 0, 0 и используйте границы для построения треугольника. Поскольку линия между границами (например, между верхним и левым) диагональна, вы можете создавать с ней красивые, сплошные цветные треугольники!

Вот пример!

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 и использовать <span> в своем HTML, вместо того чтобы полагаться на :after.

Ответ 2

Нашел этот вопрос через 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;
}

Пример jsFiddle

Я обнаружил, что можно было достичь без внутреннего <div>, но только тогда, когда <td> был пуст, что, вероятно, не помогает.

Ответ 3

Сделать текст ячейки внутри 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>