html - 在定价表中放置一个“最受欢迎”的圆圈

Question

我正在构建一个简单的定价表，并想在其中放置一个“最受欢迎”的圆圈，就像我创建的这个模型图像一样。

这就是我创建定价​​表的方式。

.columns {
    float: left;
    width: 30%;
    padding: 8px;
}

.table {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
}

.table .header {
    background-color: #333;
    color: #fff;
}

.table li {
    padding: 20px;
    text-align: center;
}

.table .top {
    background-color: #eee;
}

<div class="columns">
<ul class="table">
<li class="header">First Product</li>
<li class="top">$100.00</li>
<li>First feature</li>
<li>Second feature</li>
<li><a href="#"">Buy</a></li>
</ul>
</div>
<div class="columns">
<ul class="table">
<li class="header">Second Product</li>
<li class="top">$100.00</li>
<li>First feature</li>
<li>Second feature</li>
<li><a href="#"">Buy</a></li>
</ul>
</div>
<div class="columns">
<ul class="table">
<li class="header">Third Product</li>
<li class="top">$100.00</li>
<li>First feature</li>
<li>Second feature</li>
<li><a href="#"">Buy</a></li>
</ul>
</div>

然后我找到了一种方法来创建一个包含“最受欢迎”的圈子（虽然不确定这是否是最好的方法），就像这样。我颠倒了颜色，以便可以在白色背景上看到它。

.dot {
    height: 55px;
    width: 70px;
    background-color: #fff;
    border-radius: 50%;
    border: 3px solid #eee;
    display: inline-block;
    padding-top: 15px;
}

<div style="text-align:center">
  <span class="dot">Most<br>Popular</span>
</div>

我只是不确定如何将这些概念结合在一起，以创建类似于样机镜头中的东西，其中圆圈与价格的一侧成一定角度，并在边缘被切断。

标签： htmlcss

Answer 1

你可以把你的.dot类变成一个伪元素，这意味着你不必将它添加到你的 HTML 中。

使用下面的代码，如果将类添加most-popular到top元素，它将显示“最受欢迎”徽章。您可能需要花几分钟时间对其进行样式设置以使其与您的图像完美匹配，但困难的部分应该不碍事。

变化：

• 为了将“最受欢迎”定位在左侧，我将其设置为position: absolute;，并将其父级设置为display: relative;。使用topandleft属性，我将它定位在其父级的左侧并垂直居中。

• 我已经戴上overflow: hidden;了父级，以便隐藏其边界之外的任何内容。

• 应用于transform: rotate(-15deg)徽章以使其略微旋转。

.columns {
  float: left;
  width: 30%;
  padding: 8px;
}

.table {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
}

.table .header {
  background-color: #333;
  color: #fff;
}

.table li {
  padding: 20px;
  text-align: center;
}

.table .top {
  background-color: #eee;
  position: relative;
  overflow: hidden;
}

.most-popular::after {
  content: 'Most Popular';
  display: block;
  height: 55px;
  width: 70px;
  border-radius: 50%;
  border: 3px solid #fff;
  padding-top: 15px;
  position: absolute;
  transform: rotate(-20deg);
  left: -5px;
  top: -5px;
}

<div class="columns">
  <ul class="table">
    <li class="header">First Product</li>
    <li class="top">$100.00</li>
    <li>First feature</li>
    <li>Second feature</li>
    <li><a href="#">Buy</a></li>
  </ul>
</div>
<div class="columns ">
  <ul class="table ">
    <li class="header ">Second Product</li>
    <li class="top ">$100.00</li>
    <li>First feature</li>
    <li>Second feature</li>
    <li><a href="# ">Buy</a>
    </li>
  </ul>
</div>
<div class="columns ">
  <ul class="table ">
    <li class="header ">Third Product</li>
    <li class="top most-popular">$100.00
    </li>
    <li>First feature</li>
    <li>Second feature</li>
    <li>
      <a href="# ">Buy</a>
    </li>
  </ul>
</div>