How to create a css arrow on top of a box?-CodePudding

arrow on top of div simple css

Just checking this for the first time. What is the best short way to show an arrow on a "current" selected div with a number inside a square and the arrow with the same color?

CodePudding user response：

.box{
  width: 20px;
  height: 20px;
  background-color: #005428;
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  &.current {
   &::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;  
    border-top: 10px solid  #005428;;
    margin-bottom: 3px;
   }
 }
}

CodePudding user response：

You can set an absolute before element on the elements, and add some css like this:

.active::before{
  position: absolute;
  top: -1.4rem;
  left: 0;
  content: attr(data-before);
  background-color: green;
  width: 2rem;
  height: 1.4rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

see in jsfiddle: https://jsfiddle.net/jonas_ventje/jvfpmeq6/5/