CodePen

HTML

            
                      <div class="catWrap">
            <div class="arrow-right"></div>
            <div class="arrow-left"></div>
            <div class="arrow-down"></div>
           <a href="google.com"> <div class="arrow-up"></div> </a>
        </div>
            
          
!
via HTML Inspector

CSS

            
              .catWrap
{
	position: relative;	
	width: 240px;
	height: 240px;
	margin: 0 auto;
	top: 30px;
}

.catWrap a
{
	width: 10px;
	height: 10px;	
}

.arrow-right {
	width: 0; 
	height: 0;
	border-top: 120px solid transparent;
	border-bottom: 120px solid transparent;
	border-left: 120px solid green;
	border-right: 120px solid transparent;
	
	border-top-left-radius: 360px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 360px;
	border-bottom-right-radius: 60px;
	
	margin: 0 auto;
	position: absolute;
}

.arrow-left
{
	width: 0;
	height: 0;
	border-top: 120px solid transparent;
	border-bottom: 120px solid transparent;
	border-left: 120px solid transparent;
	border-right: 120px solid blue;
	
	border-top-left-radius: 60px;
	border-top-right-radius: 360px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 360px;
	
	margin: 0 auto;
	position: absolute;
}	


.arrow-down {
	width: 0; 
	height: 0;
	border-top: 120px solid red;
	border-bottom: 120px solid transparent;
	border-right: 120px solid transparent;
	border-left: 120px solid transparent;
	
	border-top-right-radius: 360px;
	border-top-left-radius: 360px;
	border-bottom-right-radius: 360px;
	border-bottom-left-radius: 60px;
	
	margin: 0 auto;
	position: absolute;
}

.arrow-up
{
	width: 0;
	height: 0;
	border-top: 120px solid transparent;
	border-bottom: 120px solid yellow;
	border-right: 120px solid transparent;
	border-left: 120px solid transparent;
	
	border-top-right-radius: 60px;
	border-top-left-radius:	60px;
	border-bottom-right-radius: 360px;
	border-bottom-left-radius: 360px;
	
	margin: 0 auto;
	position: absolute;
	
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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