Skip to content

Instantly share code, notes, and snippets.

@tutweb

tutweb/css-segitiga.html

Created July 2, 2013 17:48
Show Gist options
  • Save tutweb/5911472 to your computer and use it in GitHub Desktop.
Save tutweb/5911472 to your computer and use it in GitHub Desktop.
Download ZIP
Membuat bentuk segitiga dengan css
Raw
css-segitiga.html
<!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