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

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>

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

Answer 1

您可以将Method token does not exist.类改为伪元素，这意味着您不必将其添加到HTML中。

使用下面的代码，如果您将类.dot添加到most-popular元素，它将显示“最受欢迎”标志。您可能需要花几分钟时间并对它进行样式设置，以使其与您的图像完美匹配，但是困难的部分应该被排除在外。

更改：

• 要将“最流行的”放置在左侧，我将其设置为top，并将其父项设置为position: absolute;。使用display: relative;和top属性，我将其放置在其父级的左侧并垂直居中。

• 我已将left放在父级上，以便隐藏其边界之外的任何内容。

• 将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;
}