The clip-path css property is a fun one. It's essentially setting a mask on an element. From MDN, "The clip-path CSS property creates a clipping region that set what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
For the example below, I'm using clip-path for the rectangle shape and for the hover state shape. I want to note, a div will be a rectangle if you set width and height values so why use clip-path to set the rectangle shape? It's becuase I'm going to use the transition property to animate the element on hover. You can use clip-path: none; for a rectangle but the animation will not work.
For clip-path there are many values that may be used but I'm using the polygon function polygon(). I can set coordinates values for each point on an x and y axis that will be animated.
Simply put, for the default state, I set the clip-path value's polygon coordionates that show as a rectangle. Then on :hover I set the clip-path value's polygon coordionates to show as a chevron type shape.
Then I use a transition property to animate it: transition: clip-path .5s ease-in-out;. That's it.
You can find more information here MDN:Clip-path