Top Left Rounded Corner in CSS
How do I make an top left rounded corner in css?
What is a top left rounded corner in css? How do you make a top left rounded corner in css? This script and codes were developed by James Barnett on 11 August 2022, Thursday.
Top Left Rounded Corner in CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Top Left Rounded Corner in CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /**** draw the triangle ****/
.box { overflow: hidden; } /* needed to round trinagle corner */
/* draw top-left css triangle */
.triangle { position: absolute; width: 0; height: 0; border-top: 55px solid #ea6c6c; border-right: 55px solid transparent;
}
/* position 'new' label */
.triangle > span { position: absolute; top: -45px; left: 4px; transform: rotate(-45deg);
}
/***** basic styling for the box *****/
.box { position: relative; width: 315px; height: 160px; margin: 20px; background: #f0f7fa; border-radius: 10px; font-size: 18px; font-family: 'Arial'; }
.box-contents { width: 150px; margin: 12px auto; text-align: center; }
.course { color: #9cc7dd; text-transform: uppercase;
}
.badge { color: #337394; font-weight: bold; margin-top: 3px;
}
.box-contents > img { width: 100px; transform: scale(1.1); margin-top: 20px;
}
.triangle > span { font-size: 16px; color: white;
}
/* move badge up on hover */
.box-contents > img:hover { margin-top: 10px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="box"> <div class="triangle"> <span>New</span> </div> <div class = "box-contents"> <div class = "course">Illustrator Foundations</div> <div class = "badge">Applying Effects</div> <img src="http://d3gswd4a9vhkat.cloudfront.net/badges_DD_ILF_Stage5.png"alt="Applying Effects Badge"> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Top Left Rounded Corner in CSS - Script Codes CSS Codes
/**** draw the triangle ****/
.box { overflow: hidden; } /* needed to round trinagle corner */
/* draw top-left css triangle */
.triangle { position: absolute; width: 0; height: 0; border-top: 55px solid #ea6c6c; border-right: 55px solid transparent;
}
/* position 'new' label */
.triangle > span { position: absolute; top: -45px; left: 4px; transform: rotate(-45deg);
}
/***** basic styling for the box *****/
.box { position: relative; width: 315px; height: 160px; margin: 20px; background: #f0f7fa; border-radius: 10px; font-size: 18px; font-family: 'Arial'; }
.box-contents { width: 150px; margin: 12px auto; text-align: center; }
.course { color: #9cc7dd; text-transform: uppercase;
}
.badge { color: #337394; font-weight: bold; margin-top: 3px;
}
.box-contents > img { width: 100px; transform: scale(1.1); margin-top: 20px;
}
.triangle > span { font-size: 16px; color: white;
}
/* move badge up on hover */
.box-contents > img:hover { margin-top: 10px; }
Developer | James Barnett |
Username | jamesbarnett |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,615 Kb |
Views | 44,528 |
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!
Name | Size |
Console.log output in codepen | 1,713 Kb |
Extremely simple loading animation | 1,804 Kb |
Subscribe form | 2,101 Kb |
Simple CSS Dropdown Menu | 3,822 Kb |
Piet Mondrian Composition II | 1,919 Kb |
Custom select box | 2,323 Kb |
Pure CSS Star Rating Widget | 2,156 Kb |
CSS speech bubble | 2,293 Kb |
Marquee using CSS3 keyframe animation | 2,260 Kb |
Browser hack for Firefox | 1,520 Kb |
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!
Name | Username | Size |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Off Canvas | Mariamarica | 1,870 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!