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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
    <div class="box">
      <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="left"></div>
      </div>
</body>
</html>
 
.top {
  width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
  top:-100px;
  left:0;
border-color: transparent transparent #007bff transparent;}
​
.right  {
  width: 0;
height: 0;
border-style: solid;
border-width: 100px 0 100px 100px;
border-color: transparent transparent transparent #007bff;
  right:-100px;
}
​
.bottom {
  width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
  top:200px;
}
​
.left {width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
  left:-100px;
border-color: transparent #007bff transparent transparent;}
​
.box {
  position:relative;
  top:200px;
  left:200px;
  background:gold;
  height: 200px;
  width:200px;
}
​
.box > div {
  position: absolute;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers