Markings in top left corner of a table element
<p>I have a left/right scrollable table with two rows and 30+ and growing columns on my homepage. It looks like this: </p>

<p><a href="https://i.stack.imgur.com/JmnH3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JmnH3.png" alt="enter image description here"></a></p>

<p>But I would like to add some titles on "flags" like this:</p>

<p><a href="https://i.stack.imgur.com/o7oqy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o7oqy.png" alt="enter image description here"></a> </p>

<p>How could I add "flags" without having to draw transparent PNG and put it on top layer. I was thinking about using canvas, but how could I draw those "flags" which aren't squares and put them in top right corner of every table? </p>

<hr>

<p><strong>ADD</strong></p>

<p>I like @rick-hitchcock's answer which looks really simple and I tried to implementing it into my webpage. But the "flags" won't seem to render. </p>

<p>Here is how I implemented it: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table.index{
  table-layout: fixed;
  border-spacing: 20px;
}
table.index td {
  height: 190px; /*iz tega se preračuna višina slike v %*/
  width: 190px; /*iz tega se preračuna širina slike v %*/
  min-width: 190px; /*ne smejo biti manjši - tabela se širi*/
  position: relative; /*da deluje spodnja vrstica*/
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #1A1A1A;
  background-color: rgba(0, 0, 0, 0.90);
  box-shadow: 0px 0px 8px #000000;
  -moz-box-shadow: 0px 0px 8px #000000;
  -webkit-box-shadow: 0px 0px 8px #000000;
  vertical-align: middle;
  text-align: center;
  padding: 5px 5px 5px 5px;
}
table.index td img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  z-index: -1;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  transition: all 1.5s ease;
}
table.index td a{
  color: #FF3C3F;
}
table.index td p.napis{
  opacity: 0.0;
  color: white;
  text-shadow: 0px 0px 2px #555555;
  font-size: 14px;
  font-family: ss9;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  transition: all 1.5s ease;
}
table.index td:hover p.napis{
  opacity: 1.0;
}
table.index td:hover{
  box-shadow: 0px 0px 15px #000000;
  -moz-box-shadow: 0px 0px 15px #000000;
  -webkit-box-shadow: 0px 0px 15px #000000;
}
table.index td:hover img {
  -webkit-filter: blur(2px) opacity(20%);
  -o-filter: blur(2px) opacity(20%);
  -ms-filter: blur(2px) opacity(20%);
  filter: blur(2px) opacity(20%);
}
div.index {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-y: hidden;
}


&lt;!-- THE CODE YOU PROVIDED--&gt;

.container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.discount, .event {
  position: absolute;
  top: 0;
  transform: rotate(-45deg);
  transform-origin: 50% 250%;
  width: 10em;
  padding: 0.3em 0;
  text-align: center;
  border: 1px solid #333;
  font: 14px verdana;
}

.discount {
  background: #cfc;
}

.event {
  background: yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="index"&gt;
  &lt;div class="index"&gt;
    &lt;table class="index"&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class="container"&gt;
            &lt;div class="discount"&gt;Discount&lt;/div&gt;
            &lt;img src="../slike/index/2016-01-18-embedded_world.jpg"/&gt;
            &lt;p class="napis"&gt;
              Obiskali bomo sejem &lt;a href="https://www.embedded-world.de/en" target="_blank"&gt;Embedded world&lt;/a&gt; v Nürnbergu, kjer si bomo ogledali najnovejšo tehnologijo na področju vgrajenih sistemov. Dijaki ŠC Kranj lahko pri meni prevzamete štiri brezplačne karte z vključenim prevozom!
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>For some reason it won't render as a "flag" but only as a text. Normally it looks like this: </p>

<p><a href="https://i.stack.imgur.com/af6YE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/af6YE.png" alt="Image of a single tile"></a></p>

<p>and on mouse hoover it looks like: </p>

<p><a href="https://i.stack.imgur.com/s1vdC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s1vdC.png" alt="The same tile in it&#39;s hovered state (a text overlay) but it&#39;s missing the all important banner"></a> </p>

<p>Here is my <a href="http://ziga-lausegger.com/strani/" rel="nofollow noreferrer">webpage</a> if you want to check it out.</p>