.png)
10 hours ago
1
GitHub-style corner ribbons with "Built with Claude" text. Perfect for showcasing projects built using Claude AI. Inspired by GitHub Ribbons.
This project was 100% generated by Claude and then deployed to Netlify.
Demo: https://claude-ribbons.netlify.app/
- Clean, professional ribbon design
- Multiple color variations
- Hover effects with smooth transitions
- Responsive design
- Easy to customize
- Works on any website
Add the ribbon CSS to your stylesheet and include the HTML element where you want the ribbon to appear.
</div>'><div class="container">
<a href="#" class="ribbon-top-right">Built with Claude</a>
<!-- Your content here -->
</div>
.container {
position: relative;
/* your container styles */
}
.ribbon-top-right {
position: absolute;
top: 25px;
right: -35px;
background: #007acc;
color: white;
padding: 10px 50px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transform: rotate(45deg);
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: background-color 0.3s;
width: 150px;
text-align: center;
}
.ribbon-top-right:hover {
background: #005999;
}
</div>'><div class="container">
<a href="#" class="ribbon-top-left">Built with Claude</a>
<!-- Your content here -->
</div>
.ribbon-top-left {
position: absolute;
top: 60px;
left: -60px;
background: #28a745;
color: white;
padding: 10px 50px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transform: rotate(-45deg);
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: background-color 0.3s;
width: 150px;
text-align: center;
}
.ribbon-top-left:hover {
background: #1e7e34;
}
You can add these additional CSS classes for different color schemes:
<a href="#" class="ribbon-top-right ribbon-red">Built with Claude</a>
.ribbon-red {
background: #dc3545 !important;
}
.ribbon-red:hover {
background: #c82333 !important;
}
<a href="#" class="ribbon-top-right ribbon-purple">Built with Claude</a>
.ribbon-purple {
background: #6f42c1 !important;
}
.ribbon-purple:hover {
background: #5a32a3 !important;
}
<a href="#" class="ribbon-top-left ribbon-dark">Built with Claude</a>
.ribbon-dark {
background: #343a40 !important;
}
.ribbon-dark:hover {
background: #23272b !important;
}
Here's the complete CSS for all ribbon variations:
/* Base ribbon styles */
.ribbon-top-right {
position: absolute;
top: 25px;
right: -35px;
background: #007acc;
color: white;
padding: 10px 50px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transform: rotate(45deg);
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: background-color 0.3s;
width: 150px;
text-align: center;
}
.ribbon-top-right:hover {
background: #005999;
}
.ribbon-top-left {
position: absolute;
top: 60px;
left: -60px;
background: #28a745;
color: white;
padding: 10px 50px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transform: rotate(-45deg);
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: background-color 0.3s;
width: 150px;
text-align: center;
}
.ribbon-top-left:hover {
background: #1e7e34;
}
/* Color variations */
.ribbon-red {
background: #dc3545 !important;
}
.ribbon-red:hover {
background: #c82333 !important;
}
.ribbon-purple {
background: #6f42c1 !important;
}
.ribbon-purple:hover {
background: #5a32a3 !important;
}
.ribbon-dark {
background: #343a40 !important;
}
.ribbon-dark:hover {
background: #23272b !important;
}
- Make sure your ribbon's parent container has position: relative
- The ribbon needs overflow: hidden on the parent container to clip properly
- Ribbons work best on containers with adequate padding/margin at the corners
- Text length affects the ribbon appearance - keep it concise
Simply replace "Built with Claude" with your desired text:
<a href="#" class="ribbon-top-right">Your Text Here</a>
Create your own color variation:
.ribbon-custom {
background: #your-color !important;
}
.ribbon-custom:hover {
background: #your-hover-color !important;
}
Modify the width, padding, and font-size properties:
.ribbon-large {
width: 200px;
padding: 15px 60px;
font-size: 16px;
}
- All modern browsers
- IE11+ (with some CSS3 limitations)
- Mobile responsive
Free to use in any project. No attribution required.
