<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Ribbon HTML/CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ribbon"></div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/10Dimensional/ribbon-htmlcss-MeJvjy */
body {
padding: 20px;
}
.ribbon {
position: relative;
}
.ribbon:before, .ribbon:after {
content: "";
width: 0;
position: absolute;
display: block;
border-right: 20px solid #1eb2df;
border-left: 20px solid #1eb2df;
border-top: 50px solid #1eb2df;
border-bottom: 10px solid #1eb2df;
border-bottom-color: transparent;
z-index: 0;
}
.ribbon:after {
top: 2px;
border-color: #ccc;
border-bottom-color: transparent;
z-index: -1;
}