Skip to content

Instantly share code, notes, and snippets.

@imharshm

imharshm/index.html

Last active January 21, 2021 10:38
Show Gist options
  • Save imharshm/c230c1fcb3641111864e805d2d025fee to your computer and use it in GitHub Desktop.
Save imharshm/c230c1fcb3641111864e805d2d025fee to your computer and use it in GitHub Desktop.
Download ZIP
CSS triangle custom border color
Raw
index.html
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.arrow {
position: relative;
margin: 3rem;
width: 80%;
}
.arrow:after,
.arrow:before {
content: '';
display: inline-block;
position: absolute;
right: 100%;
width: 0;
height: 0;
border-style: solid;
}
.arrow:after {
top: 10px;
border-color: transparent #fff transparent transparent;
border-width: 10px;
}
.arrow:before {
top: 9px;
border-color: transparent #ddd transparent transparent;
border-width: 11px;
}
</style>
<body>
<div class="arrow"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment