Roundout Ribbon

Developer
Rafael Abensur
Size
2,907 Kb
Views
26,312
  1. Roundout Ribbon Previews
  2. Roundout Ribbon HTML Codes
  3. Roundout Ribbon CSS Codes

How do I make an roundout ribbon?

What is a roundout ribbon? How do you make a roundout ribbon? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.

Roundout Ribbon Previews
IQ Test

Roundout Ribbon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Roundout Ribbon</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fontastic.s3.amazonaws.com/opvWFHyoz4tnx7Gsnt6sMV/icons.css'>
<link rel='stylesheet prefetch' href='https://codepen.io/abensur/pen/CHFbg'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ribbon-container"> <img src="https://placehold.it/1100/444/fff/&text=ROUNDOUT+RIBBON"/> <div class="ribbon"> <span class="ribbon__icon icon-photo" aria-hidden="true"></span> <div class="ribbon__roundout"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Roundout Ribbon - Script Codes CSS Codes

html { background: #fcfcfc; font-size: 12px;
}
@media only screen and (min-width: 640px) { html { font-size: 13px; }
}
@media only screen and (min-width: 800px) { html { font-size: 14px; }
}
.ribbon-container { position: relative; z-index: 1; width: 18.75rem; margin: 2rem auto;
}
.ribbon-container img { width: 100%; border-radius: 100%; z-index: 2;
}
.ribbon { position: absolute; top: 14.375rem; left: 7.1rem; background: #9b59b6; height: 4.6875rem; width: 4.6875rem; text-align: center; line-height: 5rem; border-radius: .25rem .25rem 0 0;
}
.ribbon__icon { font-size: 2rem; color: white;
}
.ribbon:before { position: absolute; content: ''; display: block; width: 5.76562rem; height: .125rem; padding: 0 0 0.7em; top: 3.85rem; left: -11.5%; z-index: -1; background: #713b87; border-radius: 0 0 0.313em 0.313em;
}
.ribbon__roundout:before, .ribbon__roundout:after { position: absolute; bottom: .125rem; width: .25rem; height: .25rem; content: " "; border-top-left-radius: .25rem; border-top-right-radius: .25rem;
}
.ribbon__roundout:before { left: -.3125rem; border-bottom-right-radius: .25rem; border-width: 0 1px 1px 0; box-shadow: 0.125rem 0.125rem 0 #9b59b6;
}
.ribbon__roundout:after { right: -.3125rem; border-bottom-left-radius: .25rem; border-width: 0 0 1px 1px; box-shadow: -0.125rem 0.125rem 0 #9b59b6;
}
Roundout Ribbon - Script Codes
Roundout Ribbon - Script Codes
Home Page Home
Developer Rafael Abensur
Username abensur
Uploaded September 12, 2022
Rating 3
Size 2,907 Kb
Views 26,312
Do you need developer help for Roundout Ribbon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rafael Abensur (abensur) Script Codes
Name
Responsive SVG thermometer
A Pen by Rafael Abensur
D3.js with CSS sprites
Amadurou Logo Animation
React Progress Bar
D3.js Brazil Economic Underwater
New Pen Template
Algorithm practice
Isocubes
Divinding circle
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!