CSS Pointer Arrow

In this example below you will see how to do a CSS Pointer Arrow with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by siriusastrebe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright siriusastrebe ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Pointer Arrow</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <body style="background-color: gray">
    <div class="pointer-arrow right" style="position: absolute; left:30px; top: 30px; width:100px; height:100px; border:1px solid black; background-color:white;">
    </div>
    <div class="pointer-arrow left" style="position: absolute; left:230px; top: 30px; width:100px; height:100px; border:1px solid black; background-color:white;">
    </div>
    <div class="pointer-arrow up" style="position: absolute; left:430px; top: 30px; width:100px; height:100px; border:1px solid black; background-color:white;">
    </div>
    <div class="pointer-arrow down" style="position: absolute; left:630px; top: 30px; width:100px; height:100px; border:1px solid black; background-color:white;">
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/siriusastrebe/css-pointer-arrow-QpQxbP */
.pointer-arrow::before {
  z-index: 1;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  transform: translateY(-50%) rotate(45deg);
  border-style: solid;
  border-width: 9px;
  transform-origin: 0 0;
}
.pointer-arrow.up::before {
  top: -3px;
  left: 50%;
  border-color: white transparent transparent white;
  box-shadow: -2px -1px 1px -1px rgba(0, 0, 0, 0.14);
}
.pointer-arrow.right::before {
  top: 50%;
  right: -16px;
  border-color: white white transparent transparent;
  box-shadow: 2px -1px 1px -1px rgba(0, 0, 0, 0.14);
}
.pointer-arrow.left::before {
  top: 50%;
  left: 0;
  border-color: transparent transparent white white;
  box-shadow: -1px 2px 1px -1px rgba(0, 0, 0, 0.14);
}
.pointer-arrow.down::before {
  bottom: -13px;
  left: 50%;
  border-color: transparent white white transparent;
  box-shadow: -1px 2px 1px -1px rgba(0, 0, 0, 0.14);
}

Comments