CSS-only ribbon with skewed bottom corner - html

Question

What i'm trying to achieve is to create a purely-CSS ribbon which will:
adapt to the included text (working),
floated to the left of container (working),
have a skewed bottom right corner like on below img:
This is my code - HTML:
<div class="container">
<div class="ribbon left_ribbon"><h2>Testing</h2></div>
</div>
and CSS:
.container {
width:80%;
background:grey;
display:block;
min-height:500px;
margin:0 auto;
}
.ribbon{
color: #fff;
margin: 30px 0 50px;
position: relative;
text-transform: uppercase;
background: rgb(0, 164, 239);
box-shadow: 0px 1px 3px rgba(0,0,0,.2);
padding: 10px 15px;
clear: both;
}
div.left_ribbon{
color: #000;
margin-left: -10px;
float: left;
}
div.left_ribbon h2{
margin: 0 12px;
color:#fff;
}
div.left_ribbon::before{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
left: -10px;
content: "";
border-bottom: 10px solid transparent;
border-right: 10px solid rgb(0, 80, 116);
}
is it doable via CSS or I have to use SVG file?

Answer 1

clip-path can do it easily:
.box {
width:200px;
height:100px;
margin:50px;
position:relative;
background:grey;
}
.box:before {
content:"Ribbon";
font-size:25px;
padding:5px 25px 10px;
position:absolute;
top:10px;
left:-5px;
background:
linear-gradient(#000 0 0) bottom/100% 5px no-repeat
#00a4ef;
clip-path:polygon(0 0,100% 0,80% calc(100% - 5px),5px calc(100% - 5px),5px 100%,0 calc(100% - 5px))
}
<div class="box">
</div>
With some CSS variables to easily control:
.box {
--s:10px; /* skewed part */
--o:5px; /* offset part */
--c:#00a4ef; /* color */
width:200px;
height:100px;
display:inline-block;
margin:5px;
position:relative;
background:grey;
}
.box:before {
content:attr(data-text);
font-size:25px;
padding:5px calc(10px + var(--s)) calc(5px + var(--o)) calc(10px + var(--o));
position:absolute;
top:10px;
left:calc(-1*var(--o));
background:
linear-gradient(#000 0 0) bottom/100% var(--o) no-repeat
var(--c);
clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) calc(100% - var(--o)),var(--o) calc(100% - var(--o)),var(--o) 100%,0 calc(100% - var(--o)))
}
<div class="box" data-text="test"></div>
<div class="box" data-text="another test" style="--c:red;--o:10px;--s:25px"></div>
<div class="box" data-text="another one" style="--c:yellow;--o:0px;--s:40px"></div>

Answer 2

Please modify your CSS as below. pseudo after CSS added making it skewed form bottom right corner and, modified box-shadow from .ribbon for removing visible shadow of skewed area.
.container {
width:80%;
background:grey;
display:block;
min-height:500px;
margin:0 auto;
}
.ribbon{
color: #fff;
margin: 30px 0 50px;
position: relative;
text-transform: uppercase;
background: rgb(0, 164, 239);
box-shadow: 0px 1px 3px rgb(0 0 0 / 0%);
padding: 10px 15px;
clear: both;
}
div.left_ribbon{
color: #000;
margin-left: -10px;
float: left;
}
div.left_ribbon h2{
margin: 0 12px;
color:#fff;
}
div.left_ribbon::before{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
left: -10px;
content: "";
border-bottom: 10px solid transparent;
border-right: 10px solid rgb(0, 80, 116);
}
div.left_ribbon::after{
content: '';
position: absolute;
top: 0;
right: 0;
border-bottom: 47px solid grey;
border-left: 23px solid rgb(0, 164, 239);
width: 0;
}
<div class="container">
<div class="ribbon left_ribbon"><h2>Testing</h2></div>
</div>