2016-09-08 2 views
0

이미지에 설명 된대로 삼각형을 만들고 싶습니다.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

Image with triangle to the bottom

: 나는 HTML 이메일 전송 시스템을 만드는 중이라서, 그래서 position, div, after:, before를 사용할 수 없기 때문에. table인라인 -ss 만 사용해야합니다.

도움이 될 것입니다.

감사합니다. 여기

+0

당신이 적어도 시도 자신이 코딩 할 것으로 예상된다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용과 작동하지 않은 이유를 설명하십시오. –

+0

삼각형 이미지를 사용해 보았습니다. 그러나 그것은 작동하지 않았다. –

+0

우선 살펴보십시오. http://stackoverflow.com/questions/7073484/how-do-css-triangles-work ... 그리고 신청하십시오. – AA2992

답변

0

당신은 이동 :

<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>

+0

내가 언급했듯이, 나는'position','after :' –

+0

을 사용할 수 없습니다. 업데이트 된 스 니펫을 확인하십시오. – aavrug