Skip to content

Instantly share code, notes, and snippets.

@growdigital

growdigital/characters-in-a-circle-css.html

Created September 7, 2018 19:19
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 growdigital/9cb7db925528351c8d9681976032d439 to your computer and use it in GitHub Desktop.
Save growdigital/9cb7db925528351c8d9681976032d439 to your computer and use it in GitHub Desktop.
Download ZIP
Characters in a circle
Raw
characters-in-a-circle-css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Characters in a circle</title>
<style>
body {
font-family: sans-serif;
}
/* thank you @thirtydot http://jsfiddle.net/dQR9T/13284/ */
.numberCircle {
border: 4px solid #666;
border-radius: 50%;
color: #666;
font-family: Arial;
font-size: 2rem;
height: 2.25rem;
line-height: 1;
padding: 0.2rem;
text-align: center;
width: 2.25rem;
}
</style>
</head>
<body>
<p>Right-pointing double angle quotation mark:</p>
<div class="numberCircle">»</div>
<p>Single right-pointing angle quotation mark:</p>
<div class="numberCircle">›</div>
<p>Left-pointing double angle quotation mark:</p>
<div class="numberCircle">«</div>
<p>Single left-pointing angle quotation mark:</p>
<div class="numberCircle">‹</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment