Question

我的主页上有一个左/右可滚动表格，其中包含两行和30+以及不断增长的列。它看起来像这样：

但我想在“旗帜”上添加一些标题：

如何在不必绘制透明PNG并将其放在顶层的情况下添加“标志”。我正在考虑使用画布，但我怎么能画出那些不是正方形的“旗帜”并将它们放在每张桌子的右上角？

添加

我喜欢@ rick-hitchcock的答案，看起来非常简单，我试图在我的网页中实现它。但“标志”似乎不会呈现。

以下是我实施它的方式：

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 <a href="https://www.embedded-world.de/en" target="_blank">Embedded world</a> 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>

由于某种原因，它不会呈现为“标志”，而只会呈现为文本。通常它看起来像这样：

鼠标胡佛看起来像：

如果您想查看，请参阅我的webpage。

Answer 1

您可以使用CSS3 transform来旋转包含该标志的DIV。

要在悬停表格单元格时使标志消失，您可以执行以下操作：

td:hover .discount, td:hover .event {
  display: none;
}

这使它立即消失/重新出现，这可能有点刺耳。或者，您可以像这样转换其不透明度：

.discount, .event {
  transition: 0.5s;
}

td:hover .discount, td:hover .event {
  opacity: 0;
}

<强>段：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我认为您正在寻找类似的内容：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;
}

表格元素左上角的标记

2 个答案: