Page Widget How to - Create arrow icon borders

Question

We would like to know how to create arrow icon borders.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.wrapper {<!--from ww w  . j  av a2s  .  c om-->
  position: relative;
  background: red;
}

.wrapper:before {
  content: "";
  border-radius: 2px;
  position: absolute;
  width: 1px;
  height: 14px;
  border: 20px solid black;
  border-width: 18px 27px 18px 22px;
  top: 50%;
  margin-top: -25px;
  right: 10px;
}

.wrapper:after {
  content: "";
  position: absolute;
  height: 0px;
  width: 0;
  border-width: 8px 0 8px 9px;
  border-style: solid;
  border-color: transparent transparent transparent white;
  top: 50%;
  right: 29px;
  margin-top: -8px;
}

.wrapper span {
  position: absolute;
  height: 0px;
  width: 0;
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent transparent black;
  top: 50%;
  right: 34px;
  margin-top: -6px;
  z-index: 200;
}
</style>
</head>
<body>
  <div class="wrapper" href=""><span></span></div>
</body>
</html>

The code above is rendered as follows: