Simple circle cutout css

Developer
Size
1,577 Kb
Views
10,120

How do I make an simple circle cutout css?

What is a simple circle cutout css? How do you make a simple circle cutout css? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

Simple circle cutout css Previews

Simple circle cutout css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple circle cutout css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cutout"></div>
<div id="star-six"></div>
</body>
</html>

Simple circle cutout css - Script Codes CSS Codes

body { background: #000 }
.cutout { width: 100%; height: 8em; background: radial-gradient( ellipse 90% 120px at 50% 0%, transparent 90%, #006eb6 10px); position: relative;
}
#star-six {	width: 0;	height: 0;	border-left: 50px solid transparent;	border-right: 50px solid transparent;	border-bottom: 100px solid blue;	position: relative;
}
#star-six:after {	width: 0;	height: 0;	border-left: 50px solid transparent;	border-right: 50px solid transparent;	border-top: 100px solid red;	position: absolute;	content: "";	top: 30px;	left: -50px;
}
Simple circle cutout css - Script Codes
Simple circle cutout css - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 1,577 Kb
Views 10,120
Do you need developer help for Simple circle cutout css?

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!

Tom Hermans (tomhermans) Script Codes
Create amazing captions 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!