Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
</head>
<body>
​
  <div class="Shape">
    
  <div class="Shape1"></div>
  <div class="Shape2"></div>
  <div class="Shape3"></div>
  <div class="Shape4"></div>
  <div class="Shape5"></div>
  <div class="Shape6"></div>
  <div class="Shape7"></div>
    
  </div>
​
  
</body>
</html>
​
 
body{background:white;}
​
.Shape{margin:20px 30px;}
​
.Shape1{
  position:relative;
  width:200px;
  height:65px;
  background:blue;
  border-radius:20px;
  border:2px solid white;
  z-index:2;
  top:0px;
  left:0px;}
​
.Shape2{
  
  position:relative;
  width:70px;
  height:40px;
  background:blue;
  border-radius:12px;
  border-bottom:2px solid white;
  z-index:3;
  top:-42px;
  left:170px;}
​
.Shape3{
  position:relative;
  width:20px;
  height:20px;
  background:blue;
  z-index:4;
  top:-64px;
  left:170px;}
​
.Shape4{
   position:relative;
   width:40px;
   height:46px;
   background:white;
   top:-110px;
   left:202px;
   z-index:3;
   box-shadow:inset 2px 0px 4px lightgray;
   border-bottom-left-radius:40px;}
​
.Shape5{
  position:relative;
  height:1px;
  width:218px;
  background:transparent;
  box-shadow:0px 0px 8px black;
  left:18px;
  top:-110px;}
​
.Shape6{
  position:relative;
  height:50px;
  width:20px;
  background:white;
  top:-160px;
  left:236px;
  z-index:4;}
​
.Shape7{
  position:relative;
  height:10px;
  width:50px;
  background:white;
  top:-210px;
  left:203px;
  z-index:4;}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers