CodePen

HTML

            
              <header></header>
<content>
  <div class="item-area"></div>
  <div class="previous"><a href="#"></a></div>
  <div class="next"><a href="#"></a></div>
</content>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  margin: 0;
}

header, .item-area, .previous, .next {
  background: #c2c2c2;
}

header {
  height: 60px;
}

.item-area {
  margin: 8% auto;
  max-width: 70%;
  min-height: 450px;
}

.previous, .next {
  width: 60px;
  height: 75px;
  position: fixed;
  top: 30%;
}

.next {
  right: 0;
}

.previous a, .next a {
  position: absolute;
  top: 25%;
  left: 28%;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.previous a {
  border-right: 20px solid #fff;
}

.next a {
  border-left: 20px solid #fff;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................