how to style like this with CSS? - html

Question

html-
<div class="main">
<span class="badge">Best Seller</span>
</div>
css-
.main{
position: relative;
}
.badge{
position: absolute;
top:0;
right:0;
background-color: #2879FE;
}
can anyone please show me what is the easiest way to do like this with CSS?

Answer 1

Try this
.main {
position: relative;
top: 10px; right: 10px;
width: 200px;
height: 200px;
background: #ccc;
}
.badge {
position: absolute;
top: -10px;
right: -10px;
background-color: #2879FE;
padding: 20px;
border-radius: 10px 0 0 10px;
}
.badge:after {
position: absolute;
top: 100%;
right: 0;
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid #2879FE;
content: '';
}
<div class="main">
<span class="badge">Best Seller</span>
</div>

Answer 2

You can do this with pure CSS. I believe this is called a CSS ribbon
I found a pen by ds729 and modified it to match your design a little but more.
/* Reset */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
font,
img,
ul,
li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background: #333;
color: #999;
}
h2 {
font-style: italic;
font-weight: normal;
line-height: 1.2em;
}
div#container {
margin: 50px auto 0px auto;
/* centered */
width: 400px;
}
.bubble {
clear: both;
margin: 0px auto;
width: 350px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 90;
/* the stack order: displayed under ribbon rectangle (100) */
}
.rectangle {
background: #2879fe;
height: 50px;
width: 30;
padding: 0 20px;
position: relative;
left: -15px;
top: -15px;
float: left;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
z-index: 100;
border-radius: 0 20px 20px 0
}
.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: center;
}
.triangle-l {
border-color: transparent #2879fe transparent transparent;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: relative;
left: -30px;
top: 20px;
z-index: -1;
/* displayed under bubble */
}
.info {
padding: 60px 25px 35px 25px;
}
.info h2 {
font-size: 20px;
}
.info p {
padding-top: 10px;
font-size: 14px;
line-height: 22px;
}
.info p a {
color: #c4591e;
text-decoration: none;
}
.info p a:hover {
text-decoration: underline;
}
<div id="container">
<div class="bubble">
<div class="rectangle">
<h2>Stack Overflow</h2>
</div>
<div class="triangle-l"></div>
<div class="info">
<h2>Hello</h2>
<br />
<p>
This is pure CSS
</p>
</div>
</div>
</div>