Answers for "step arrow css"

arrow down css

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 75px solid #f00;
}

arrow left css

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent; 
  border-right: 60px solid blue; 
}

create arrow div css

div {
    	background-color: #ff6f61;
    	height: 125px;
    	width: 125px;
    	clip-path: polygon( 40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50% );
    }