Place a "most popular" circle in a pricing table - html

Question

I'm building a simple pricing table and would like to place a "most popular" circle in it like in this mockup image I have created.
This is how I've created the pricing table.
.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>Buy</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>Buy</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>Buy</li>
</ul>
</div>
I then found a way to create a circle with "most popular" in it (not sure if this is the best way to do it though), like this. I reversed the colors so it can be seen on a white background.
.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>
I'm just not sure how to bring these concepts together to create something like in the mockup shot where the circle sits on an angle off to the side of the price like that and have it cut off on the edges.

Answer 1

You can take your .dot class and make it a pseudo element instead, meaning you wouldn't have to add it to your HTML.
With the code below, if you add the class most-popular to a top element, it will show the "Most Popular" badge. You may need to take a few minutes and style it to get it to match your image perfectly, but the difficult part should be out of the way.
Changes:
To position the "most popular" to the left, I've set it to position: absolute;, and its parent to display: relative;. Using the top and left properties, I've positioned it to the left of its parent and vertically-centered.
I've put overflow: hidden; on the parent so that anything outside of its boundaries will be hidden.
Applied transform: rotate(-15deg) to the badge to give it a slight rotation.
.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>Buy</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>Buy
</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>
Buy
</li>
</ul>
</div>