Skip to content

Instantly share code, notes, and snippets.

@desmondhume

desmondhume/gist:5510040

Last active December 16, 2015 22:49
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 desmondhume/5510040 to your computer and use it in GitHub Desktop.
Save desmondhume/5510040 to your computer and use it in GitHub Desktop.
Download ZIP
Example of pure css fold on top of a box.
Raw
gistfile1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tests</title>
<style>
.badge {
background: green;
width: 200px;
height: 20px;
position: absolute;
margin-left: -100px;
top: -10px;
left: 50%;
padding: 5px;
}
.badge:before{
content: '';
position: absolute;
width: 0px;
height: 0px;
border-bottom: 10px solid #00530c;
border-left: 10px solid transparent;
left: -10px;
top: 0;
}
div.content {
background: white;
border: 1px solid black;
padding: 20px;
position: relative;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="content">
<div class="badge">Badge</div>
<p>Content</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment