Markings in top left corner of a table element - html

Question

I have a left/right scrollable table with two rows and 30+ and growing columns on my homepage. It looks like this:
But I would like to add some titles on "flags" like this:
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?
ADD
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.
Here is how I implemented it:
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;
}
<!-- THE CODE YOU PROVIDED-->
.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;
}
<section class="index">
<div class="index">
<table class="index">
<tr>
<td>
<div class="container">
<div class="discount">Discount</div>
<img src="../slike/index/2016-01-18-embedded_world.jpg"/>
<p class="napis">
Obiskali bomo sejem Embedded world 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!
</p>
</div>
</td>
</tr>
</table>
</div>
</section>
For some reason it won't render as a "flag" but only as a text. Normally it looks like this:
and on mouse hoover it looks like:
Here is my webpage if you want to check it out.

Answer 1

You could use CSS3 transform to rotate a DIV containing the flag.
To make the flag disappear when hovering the table cell, you could do this:
td:hover .discount, td:hover .event {
display: none;
}
That makes it disappear/reappear immediately, which may be a bit jarring. Alternatively, you could transition its opacity like this:
.discount, .event {
transition: 0.5s;
}
td:hover .discount, td:hover .event {
opacity: 0;
}
Snippet:
.index td {
position: relative; /* make the flags relative to their parent td */
overflow: hidden; /* prevent the flags from overflowing the cell */
}
.discount, .event {
position: absolute; /* position the flag absolutely within container */
top: 0; /* top of container */
transform: rotate(-45deg); /* rotate counterclockwise 45 degrees */
transform-origin: 50% 250%; /* experiment to find best placement */
width: 10em; /* width of flag */
text-align: center; /* center the flag's text */
padding: 0.3em 0; /* top and bottom padding */
border: 1px solid #333; /* dark border */
transition: 0.5s; /* transition changed styles in half a second */
font: 14px verdana;
}
.discount {
background: #cfc; /* light green */
}
.event {
background: yellow;
}
.index img {
width: 150px;
border: 1px solid black;
}
td:hover .discount, td:hover .event {
opacity: 0;
}
<table class="index">
<td>
<div class="discount">Discount</div>
<img src="http://ziga-lausegger.com/slike/index/2016-01-18-embedded_world.jpg"/>
<td>
<div class="event">Event</div>
<img src="http://ziga-lausegger.com/slike/index/2015-12-06-comptech.png">
</table>

Answer 2

I think you are looking for something like this: https://jsfiddle.net/DIRTY_SMITH/hywos6cx/
.wrapper {
margin: 50px auto;
width: 150px;
height: 150px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.ribbon-green:before,
.ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}