How do I change the shape of item border in navbar

Question

I was wondering how can I get this shape when the current page is displayed

My current code goes like this:

current {
  transform: skew(-20deg);
  border: 1px solid white;
  color: black;
  background-color: white;
}

But text goes sideways aswell

Answer 1

If you apply the opposite skew on an inner element, then the text will become unskewed.

.current {
  transform: skew(-20deg);
  border: 1px solid white;
  color: black;
  background-color: white;
  width: 60px;
  text-align: center;
  padding: 5px;
}

.text {
  transform: skew(20deg);
}

body {
  background: #000;
}

<div class="current">
  <div class="text">Text</div>
</div>

Answer 2

try this:

.box{
display: inline-block;
padding: 12px 64px;
background-color: #000;
color: #fff;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

<div class="box">text</div>