Inverted Border Radius Sidebar
How do I make an inverted border radius sidebar?
A collapsed sidebar with an inverter border radius that extends the lengthe of the page.. What is a inverted border radius sidebar? How do you make a inverted border radius sidebar? This script and codes were developed by Retrofuturistic on 19 January 2023, Thursday.
Inverted Border Radius Sidebar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inverted Border Radius Sidebar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sidebar"> <div class="logo">+</div>
</div>
</body>
</html>
Inverted Border Radius Sidebar - Script Codes CSS Codes
body { background: #000;
}
.logo { height:35px; width:35px; margin: 6px; padding: 7px; box-sizing:border-box; -moz-box-sizing:border-box; color:#fff; line-height: 1.3em; font-size: 40px;
}
/****** SIDEBAR ******************/
.sidebar { position:fixed; top:0; left:0; display:block; height:100%; width:50px; background:#333; font-family:sans-serif; color:#fff; overflow:hidden; z-index: 10; -webkit-transition: width 0.4s ease-in-out; -moz-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out;
}
.sidebar:before { content: ""; display: block; background: #000; position: absolute; top: 100px; right: -25px; width: 45px; height: 100%; border-radius: 20px/25px;
}
Developer | Retrofuturistic |
Username | retrofuturistic |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 1,761 Kb |
Views | 8,096 |
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 |
Responsive Horizontally Centered Cards | 2,451 Kb |
Box Shadow Effects | 2,143 Kb |
Slide Toggle Menu | 1,772 Kb |
Expandable Left Sidebar | 2,411 Kb |
Responsive Skew | 2,351 Kb |
CSS-Centered Modal Window | 2,618 Kb |
Expandable Left Side Bar with jQuery animate | 2,483 Kb |
Processing Daisy Wheel | 1,874 Kb |
Newton Balls Loading Animation | 2,426 Kb |
Responsive Skewed Text with Images | 2,197 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 |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
See Through | Larrygeams | 77,410 Kb |
Nice textured background | Hans | 2,659 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Pure CSS Dial | Lukewatts | 3,018 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!