Skip to content

Commit

Permalink
added shapes.css and demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
Ran Ben Aharon committed Sep 10, 2011
1 parent b5d13ef commit 0fa6454
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 0 deletions.
78 changes: 78 additions & 0 deletions css/shapes.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
.s_circle {
text-align: center;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.s_arrdown {
background: transparent;
width: 0;
height: 0;
border: 50px solid transparent;
border-color: #000 transparent transparent transparent;
}
.s_arrup {
background: transparent;
width: 0;
height: 0;
border: 50px solid transparent;
border-color: transparent transparent #000 transparent;
}
.s_arrright {
background: transparent;
width: 0;
height: 0;
border: 50px solid transparent;
border-color: transparent transparent transparent #000;
}
.s_arrleft {
background: transparent;
width: 0;
height: 0;
border: 50px solid transparent;
border-color: transparent #000 transparent transparent;
}
.s_arrupe {
width: 50px;
height: 50px;
margin: 10px 0;
background: transparent;
border: 10px solid #000;
border-width: 10px 10px 0 0;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.s_arrdowne {
width: 50px;
height: 50px;
margin: 10px 0;
background: transparent;
border: 10px solid #000;
border-width: 0 10px 10px 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.s_arrrighte {
width: 50px;
height: 50px;
margin: 10px 0;
background: transparent;
border: 10px solid #000;
border-width: 10px 10px 0 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.s_arrlefte {
width: 50px;
height: 50px;
margin: 10px 0;
background: transparent;
border: 10px solid #000;
border-width: 0 0 10px 10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
79 changes: 79 additions & 0 deletions demo/shapes/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 5px;
max-width: 500px;
margin: 0 auto;
}
h2 {
}
div {
padding: 10px;
background: #eee;
border: 1px solid #ddd;
margin-bottom: 20px;
}
b {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
width: 100px;
height: 100px;
line-height: 100px;
background: #000;
color: #fff;
}
</style>
<link rel="stylesheet" href="../../css/shapes.css"></script>
</head>
<body>
<h2>Circle</h2>
<div>
<b class="s_circle"></b>
<b class="s_circle">with text</b>
</div>
<h2>Arrow Up</h2>
<div>
<b class="s_arrup"></b>
</div>
<h2>Arrow Down</h2>
<div>
<b class="s_arrdown"></b>
</div>
<h2>Arrow Right</h2>
<div>
<b class="s_arrright"></b>
</div>
<h2>Arrow Left</h2>
<div>
<b class="s_arrleft"></b>
</div>
<h2>Arrow Up Empty</h2>
<div>
<b class="s_arrupe"></b>
</div>
<h2>Arrow Down Empty</h2>
<div>
<b class="s_arrdowne"></b>
</div>
<h2>Arrow Right Empty</h2>
<div>
<b class="s_arrrighte"></b>
</div>
<h2>Arrow Left Empty</h2>
<div>
<b class="s_arrlefte"></b>
</div>
</body>
</html>

0 comments on commit 0fa6454

Please sign in to comment.