Skip to content

Instantly share code, notes, and snippets.

@celsojr

celsojr/index.html

Last active June 2, 2024 15:40
Show Gist options
  • Save celsojr/6488308583690492c6829caa45574200 to your computer and use it in GitHub Desktop.
Save celsojr/6488308583690492c6829caa45574200 to your computer and use it in GitHub Desktop.
Download ZIP
Simple colored triangle with html and css only. Just for fun imitating the CG api triangles.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Triangle</title>
<style>
body {
margin: 0;
height: 100vh;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.triangle {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 260px solid transparent;
position: relative;
}
.triangle::before {
content: '';
position: absolute;
top: 0;
left: -150px;
width: 300px;
height: 300px;
background:
radial-gradient(circle at 50% 0%, red, transparent 0%),
radial-gradient(circle at 100% 100%, green, transparent 60%),
radial-gradient(circle at 0% 100%, blue, transparent 60%),
radial-gradient(circle at 50% -50%, red, transparent 170%),
radial-gradient(circle at 100% 100%, green, transparent 200%),
radial-gradient(circle at 0% 100%, blue, transparent 200%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment