HTML電子メール：tdの底に三角形をつける

画像に記載されているように三角形を作りたいと思います。HTML電子メール：tdの底に三角形をつける

<table> 
 
    <tr> 
 
    <td align="left" valign="top" style="padding-top: 10px; padding-left: 0px;"> 
 
         <span style="background: #EE163A !important; width: 100px; font-size: 15px; text-align: center; vertical-align: middle; color: #FFFFFF;padding: 10px 70px; "> DAY 1</span> 
 
        </td> 
 
    </tr> 
 
    </table>

PS：私はHTML Emailerのを作っていますので、position、div、after:、beforeを使用することはできないので。私はtableとインライン - cssを使用する必要があります。

助けがあれば助かります。

ありがとうございます。ここで

出典

2016-09-08 Anonymous

あなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されます。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

私は三角形画像を使ってみました。しかしそれはうまくいかなかった。 –

これを最初に見てください。 http://stackoverflow.com/questions/7073484/how-do-css-triangles-work ...そして、それを適用してください。 – AA2992

あなたが行く：

<table> 
 
    <tr> 
 
     <td align="left" valign="top" style="padding-top: 10px; padding-left: 0px;"> 
 
      <span style="background: #EE163A !important; width: 100px; font-size: 15px; text-align: center; vertical-align: middle; color: #FFFFFF;padding: 10px 70px; "> DAY 1</span> 
 
     </td> 
 
     <td> 
 
      <span class="arrow" style="margin-left:-100px; width: 0; height: 0; border-top: solid 5px #EE163A; border-left: solid 5px transparent; border-right: solid 5px transparent; display: block; margin-top: 37px;"></span> 
 
     </td> 
 
    </tr> 
 
</table>

出典

2016-09-08 12:22:47 aavrug

私が言及したように、私は 'position'、' after： ' –

を使うことはできません。更新されたスニペットを見てください。 – aavrug

HTML電子メール：tdの底に三角形をつける

答えて

関連する問題