Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="content"> width: 100vw;
    height: 100vh;
 
<img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
</div>
  
    <div class="content">
      width: 50vw;
    height: 50vh;
  
<img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
</div>
  
      <div class="content">
            
    width: 25vw;
    height: 25vh;
<img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="">
</div>
​
</body>
</html>
 
​
​
* {
   box-sizing: border-box;
   margin: 0;
   padding :5px;
}
​
.content{
  position : relative;
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
​
.content:nth-child(1) {
    width: 100vw;
    height: 100vh;
  border : 1px solid;
}
​
.content:nth-child(2) {
    width: 50vw;
    height: 50vh;
  border : 1px dotted;
}
​
.content:nth-child(3) {
    width: 25vw;
    height: 25vh;
  border : 1px dotted;
}
.content>img{
   position: absolute;
}
​
img:nth-child(1){
    top: 0;
    left: 0;
    transform: rotate(-180deg);
}
​
img:nth-child(2){
    top: 0;
    right: 0;
    transform: rotate(-90deg);
}
​
img:nth-child(3){
    bottom : 0;
    right: 0;
    transform: rotate(0deg);
}
​
img:nth-child(4){
    bottom : 0;
    left: 0;
    transform: rotate(90deg);
}
​
​
Output

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

Dismiss x