Skip to content

Instantly share code, notes, and snippets.

@samtsai

samtsai/jsbin.bisedoca.css

Created August 8, 2014 14:16
Show Gist options
  • Save samtsai/c89c95d3ca446900da34 to your computer and use it in GitHub Desktop.
Save samtsai/c89c95d3ca446900da34 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.bisedoca.css
.gold-standard {
background-color: #FFBC31;
}
.gold-standard .inner-ring {
background-color: #FFD700;
}
.badge-ribbon {
position: relative;
height: 100px;
width: 100px;
border-radius: 50px;
}
.badge-ribbon:before, .badge-ribbon:after {
content:'';
position: absolute;
border-bottom: 75px solid #FF3D59;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
z-index: -1;
transform: rotate(-140deg);
}
.badge-ribbon:after {
left: auto;
right: -10px;
transform: rotate(140deg);
}
.inner-ring {
border-radius: 50px;
height: 90px;
width: 90px;
position: absolute;
top: 5%;
left: 5%;
z-index: 5;
}
.name-plate {
position: absolute;
color: #FF3D59;
font-size: 1em;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
top: 50%;
text-align: center;
transform: translateY(-50%);
padding: 0 5px;
}
Raw
jsbin.bisedoca.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CSS Badge as part of a collection of Badges to Give to Developers" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="" class="gold-standard badge-ribbon">
<span class="inner-ring">
<span class="name-plate">Golden Glove</span>
</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment