Skip to content

Instantly share code, notes, and snippets.

@lanmaster53

lanmaster53/arrow.html

Created May 5, 2017 13:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lanmaster53/aa9909f2cc92606d9b148eb8e7da9c1d to your computer and use it in GitHub Desktop.
Save lanmaster53/aa9909f2cc92606d9b148eb8e7da9c1d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
arrow.html
<!DOCTYPE HTML>
<html>
<head>
<title>Arrow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.arrow-1 {
content: "";
width: 20px;
height: 20px;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid #000;
border-left: 10px solid red;
}
.arrow-2 {
content: "";
width: 10px;
height: 10px;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid #000;
border-left: 10px solid red;
}
.arrow-3 {
content: "";
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid #000;
border-left: 10px solid red;
}
.arrow-4 {
content: "";
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
border-left: 10px solid transparent;
}
</style>
</head>
<body>
<div class="arrow-1"></div>border 10px, width 20px, colored<br><br>
<div class="arrow-2"></div>border 10px, width 10px, colored<br><br>
<div class="arrow-3"></div>border 10px, width 0px, colored<br><br>
<div class="arrow-4"></div>border 10px, width 0px, transparent<br><br>
The way that borders cut from corner to corner allows us to create triangles in pure CSS!
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment