JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div id="div"></div>

<div id="pseudo"></div>

CSS

#div {
  background: blue;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
}

/* tested but not working */
#pseudo::after,
#pseudo::before {
  transform-origin: 50% 50%;
}


#pseudo::after {
  content: '›';
  font-size: 50px;
  color: green;
  right: 10px;
  position: absolute;
  transform: rotateX(90deg);
  top: 40px;
}

#pseudo::before {
  content: '›';
  font-size: 50px;
  position: absolute;
  color: green;
  right: 10px;
  top: 10px;
  transform: rotate(-90deg);
}