Question

我已经在其他网站上看到了这一点，我想知道是否有办法将其添加到我的网站而没有只使用HTML和CSS的外部图像。那么它在我的网站上有什么＆＃34;卡＆＃34;在我的页面和那些卡片中，每个卡片中的包装和一些计划比其他更好，我想显示。卡的右上角有这样的东西 http://cliparts101.com/files/10/370381D4E69D42D621F694F53A4E045D/Banner_137.png 它有文字＆＃34;最佳价值＆＃34;或类似的东西。我是否必须使用图像和叠加文本来执行此操作，或者是否有办法使用css

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Filmes')">Filmes</button>
  <button class="tablinks" onclick="openCity(event, 'Series')">Séries</button>
  <button class="tablinks" onclick="openCity(event, 'Animes')">Animes</button>
  <button class="tablinks" onclick="openCity(event, 'Desenhos')">Desenhos</button>
</div>

<div id="Filmes" class="tabcontent">
  <h3>Filmes</h3>
  <p>Todos os filmes</p>
</div>

<div id="Series" class="tabcontent">
  <h3>Séries</h3>
  <p>Todas as séries</p>
</div>

<div id="Animes" class="tabcontent">
  <h3>Animes</h3>
  <p>Todos os animes</p>
</div>

<div id="Desenhos" class="tabcontent">
  <h3>Desenhos</h3>
  <p>Todos os desenhos</p>
</div>

Answer 1

您可以在纯CSS中使用：before和：之后的容器上制作一个像这样的功能区。

.ribbon {
 font-size: 16px !important;
 width: 50%;
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; 
 margin: 2em auto 3em;
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

<div class="ribbon">
   <strong class="ribbon-content">Random Content</strong>
</div>

在包计划上添加广告横幅

1 个答案: