Creating a triangular shape at the bottom of a <td> element in an HTML email

I am trying to create a triangle shape similar to the one shown in the image.

https://i.sstatic.net/wd4nZ.png

<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 : Since I am working on an HTML Emailer, I am restricted to using only table and inline-css. I cannot use properties such as position, div, after:, or before.

Any assistance would be highly appreciated.

Thank You.

htmlcsshtml-table

Answer №1

Check out this code snippet:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting Milliseconds to a Date using JavaScript

I have been facing a challenge with converting milliseconds data into date format. Despite trying various methods, I found that the solution provided in this link only works for a limited range of milliseconds values and fails for higher values. My goal is ...

javascripthtmldatedatetime

Place a button in relation to the top of its parent element

I am trying to display control buttons at the top of a table cell when hovering over an image within the cell. Here is the HTML structure I have: <table id="pridat_fotky"> <tbody> <tr> <td class=" ...

htmlcss

Scrollable horizontal card list using Bootstrap

Looking to design a unique layout featuring a horizontal list of cards where 3 cards are displayed simultaneously, with the ability to horizontally scroll through the rest, like this: https://i.sstatic.net/KgX27.png While achieving this using CSS is stra ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Retrieve the text content within HTML tags that come after a specific paragraph using the DOM

I am looking to extract content from HTML documents. Specifically, I need the contents of all 'p' tags that come after 'h2' tags. Here is an example of the HTML to be parsed: <h1>Lorem ipsum</h1> <p> Lorem ipsum ...

phphtmldomdocument

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

Save a PNG file using the HTML5 Canvas when the Submit button is clicked, with the help of PHP

I am looking for assistance with a signature capture form. I came across a standard template on Github that works perfectly, but I wanted to customize it further. However, my Javascript skills are still in the early stages. The current code allows you to c ...

javascriptphphtmlcanvas

Creating a web layout or template using HTML

Currently in the process of developing a website, my goal is to construct html templates that include placeholders for injecting pages/content, menus, and other elements. While I admire AngularJS for its flexibility in achieving this, I fear it may be too ...

htmltemplateslayoutangularjs

ClearMedia Logo PredictiveText MaterialUi

I am trying to display the MUI Autocomplete clear text icon every time I enter text. Currently, it only shows when I select an option, not when I type anything. https://i.sstatic.net/ekwES.png https://i.sstatic.net/8wkpm.png ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to incorporate bubbles onto all of my y-axis values, as well as implement a mouseover feature for each one?

<!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { display: none ; } .line { fill: none ...

htmljsond3.jsvisualizationlinechart

Alter the color of the text within the `<li>` element when it is clicked on

Here is a list of variables and functions: <ul id="list"> <li id="g_commondata" value="g_commondata.html"> <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : ...

javascripthtmlcss

Jquery Mobile's CSS takes precedence over the CSS of my body

is causing conflicts with my body styling <body style="margin:0; padding:0; background-image:url(img/bggradient.jpg); background-repeat:repeat-x"> I have noticed that the color F6F6F6 is used 12 times in the css file, making it hard to manage. How ...

jquerycss

Is it possible to display a unique website based on the browser being used?

I have been working with Bootstrap 4 and discovered that it no longer supports Internet Explorer 8. This could pose an issue, so I am wondering if there is a way to display a different website specifically for Internet Explorer 8, or if there are ways to ...

htmltwitter-bootstrapbootstrap-4twitter-bootstrap-4

The way Chrome and Firefox interpret zoom varies. What is the best approach to manage this discrepancy in my CSS?

Currently, I am in the process of designing a webpage that features a logo and a menu in the header section. However, I have noticed an issue where, upon zooming in or out, some of the menu items shift to a second row instead of remaining on a single row a ...

htmlcssfirefoxgoogle-chrome

Connect the mileage tracker to a Datalist or grid view component

I recently downloaded the Odometer Sample from , however, I am facing an issue where only the first element in the Datalist is getting the Odometer display, while others are not displaying it. Here is the snippet of code: <script type="text/javascript" ...

javascriptjqueryasp.netvisual-studio-2010css

The mx-auto class in Bootstrap does not properly center an element in the page

Recently, I've been working on a website that makes use of the Bootstrap 5 navbar. The design includes three navbar-navs: one with me-auto, another with mx-auto, and the last with ms-auto. Strangely enough, the navbar-nav with mx-auto, which is suppos ...

htmlcssbootstrap-5navbarspacing

Tips for relocating a popup window''s position

A situation has arisen in my application where a popup window is opened with the following code: function newPopup(url, windowName) { window.open(url,windowName,'height=768,width=1366,left=10,top=10,titlebar=no,toolbar=no,menubar=no,location=no,d ...

javascripthtml

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

javascriptphpjqueryhtml

The onClick event is not executing my function

Having trouble triggering the onclick() event when trying to modify table data using ajax. Here's the code snippet: (the onclick() event is located in the last div tag) @{ ViewBag.Title = "Edit_Room"; Layout = "~/Views/Shared/_LayoutAdmin.csh ...

jqueryhtmlasp.net-mvconclickasp.net-ajax

Tips for transforming a hover menu into a clickable menu

The scenario above demonstrates that when hovering over the dropdown menu, it displays a submenu. However, I want the submenu to be displayed after clicking on the dropdown text. Could anyone provide assistance on how to change the hovermenu to a clickabl ...

javascripthtmlcss

What is the best way to customize the color of selected items in a RadComboBox using CSS?

I'm curious if it's possible to modify the "background-color" value for the selected items in a radCombobox. Below is the CSS code I've been using: (Despite being able to change other elements, I can't seem to alter the color of highli ...

cssasp-classiccomboboxtelerikradcombobox