JSFiddle - React, Tailwind, and code Playground

Down and up arrows

by nilloc

HTML

<div class="up-arrow">
</div>
<br>
<div class="down-arrow">
</div>

CSS

body{
  background-color:teal;
}

.up-arrow, .down-arrow{
  cursor:pointer;
  margin-bottom:10px;
  box-sizing:border-box;
  position:relative;
  height: 20px;
  background-repeat:no-repeat;
}


.up-arrow {
  
  background-image:
    /* top left arrow */
    linear-gradient(
      135deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    /* top right arrow */
    linear-gradient(
      225deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background-size:
    10px 10px,
    10px 10px,
    100% 30px;
  background-position:
    left calc(50% - 5px) top 20%, 
    left calc(50% + 5px) top 20%,
    left 0 top 0;
}

.down-arrow{
  background-image:
  /* left top of notch */
    linear-gradient(
      45deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    /* top right notch corner */
    linear-gradient(
      315deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background-size:
    10px 10px,
    10px 10px,
    100% 100%;
  background-position:
    left calc(50% - 5px) top 80%, 
    left calc(50% + 5px) top 80%,
    left 0 top 0;
}