Membuat bentuk segitiga dengan css
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Membuat bentuk segitiga dengan css</title> | |
<style> | |
/* Triangles | |
----------------------------*/ | |
.triangles{ | |
overflow: hidden; | |
padding: 20px; | |
margin: 20px; | |
border: 2px solid #000; | |
} | |
.triangle{ | |
margin:10px; | |
float: left; | |
} | |
/* Kelompok 1 */ | |
.demo-arrow-up{ | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
border-bottom: 50px solid #000; | |
} | |
.demo-arrow-down{ | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
border-top: 50px solid #333; | |
} | |
.demo-arrow-right{ | |
width: 0; | |
height: 0; | |
border-top: 50px solid transparent; | |
border-bottom: 50px solid transparent; | |
border-left: 50px solid #ff0; | |
} | |
.demo-arrow-left{ | |
width: 0; | |
height: 0; | |
border-top: 50px solid transparent; | |
border-bottom: 50px solid transparent; | |
border-right:50px solid #f0f; | |
} | |
/* Kelompok 2 */ | |
.demo-topleft{ | |
width: 0; | |
height: 0; | |
border-top: 50px solid #333; | |
border-right: 50px solid transparent; | |
} | |
.demo-topright{ | |
width: 0; | |
height: 0; | |
border-top: 50px solid #333; | |
border-left: 50px solid transparent; | |
} | |
.demo-bottomleft{ | |
width: 0; | |
height: 0; | |
border-bottom: 50px solid #333; | |
border-right: 50px solid transparent; | |
} | |
.demo-bottomright{ | |
width: 0; | |
height: 0; | |
border-bottom: 50px solid #333; | |
border-left: 50px solid transparent; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<p>Kelompok 1</p> | |
<div class="triangles"> | |
<div class="triangle demo-arrow-up"></div> | |
<div class="triangle demo-arrow-down"></div> | |
<div class="triangle demo-arrow-left"></div> | |
<div class="triangle demo-arrow-right"></div> | |
</div> | |
<p>Kelompok 2</p> | |
<div class="triangles"> | |
<div class="triangle demo-topleft"></div> | |
<div class="triangle demo-topright"></div> | |
<div class="triangle demo-bottomleft"></div> | |
<div class="triangle demo-bottomright"></div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment