html - 表のセルに三角形を追加する方法

Question

セルに直角三角形を追加する必要があります。

これを行う方法？

スパンとスパン内にアイコンを追加しようとしましたが、うまくいきません

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

Answer 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 に依存する代わりにa を使用できます:after。

Answer 2

div 内でセル テキストを作成するのは良い考えです。ただし、テキストではなくARROWに追加の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's height or can put more text
      </td>

    </tr>

  </tbody>
</table>

Answer 3

Google でこの質問を見つけて問題が発生したため、元の投稿が古くてもここに追加します。

Madara の答えは、ほとんどのブラウザーで機能し、すべてのブラウザーでテーブルの外のどこでも機能します。しかし、コメントで述べたように、この例は 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>ますが、これはおそらく役に立ちません。