JSFiddle - React, Tailwind, and code Playground

HTML

<section>
	<a href="" class="section__link">
		<span>Агротехника</span>
	</a>
	<a href="" class="section__link">
		<span>Легковой транспорт</span>
	</a>
	<div class="section__current">
		<p>Небольшой контент </p>
	</div>
	<a href="" class="section__link">
		<span>Спецтехника</span>
	</a>
	<a href="" class="section__link">
		<span>ЖД транспорт</span>
	</a>
</section>

<!-- -->

<section>
	<a href="" class="section__link">
		<span>Агротехника</span>
	</a>
	<a href="" class="section__link">
		<span>Легковой транспорт</span>
	</a>
	<div class="section__current">
		<p>Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент Большой контент</p>
	</div>
	<a href="" class="section__link">
		<span>Спецтехника</span>
	</a>
	<a href="" class="section__link">
		<span>ЖД транспорт</span>
	</a>
</section>

CSS

*, *:before, *:after {
  box-sizing: border-box;
}

body {
    margin: 0;
    padding: 50px;
    color: #fff;
    font-weight: bold;
    font-family: sans-serif;
    display: flex;
    flex-flow: column;
    align-items: center;
    min-width: 1200px;
}

a {
  color: inherit;
  text-decoration: none;
}

section {
    display: flex;
    width: 1100px;
    min-height: 300px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
}

section + section {
  margin-top: 50px;
}

section > * {
  position: relative;
  overflow: hidden;
}

section > *:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all .5s;
}

/**/
section .section__link {
  position: relative;
  flex: 0 0 calc(((100% - 400px) / 4) + 50px); /* Ширина с учетом скоса */
  /* flex: 0 0 calc(25% - 50px); */  /* Упрощая, можно записать так */
  font-size: 1.5rem;
}

section .section__link:before { /* Тень под блоком */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), #0000);
}

section .section__link:hover:before {
  opacity: 0;
  transform: translateY(100%);
}

section .section__link > * {
  z-index: 2;
}

section .section__link span { 
    position: absolute;
    display: block;
    transform-origin: center center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(-80deg);
    text-align: center;
}

section .section__link:nth-child(1),
section .section__link:nth-child(5) {
}

section .section__link:nth-child(2),
section .section__link:nth-child(4) {
  z-index: 10;
  -webkit-clip-path: polygon(calc(0% + 50px) 0, 100% 0%, calc(100% - 50px) 100%, 0% 100%);
  clip-path: polygon(calc(0% + 50px) 0, 100% 0%, calc(100% - 50px) 100%, 0% 100%); /* ставим контролируемую ширину скоса (50px) */
  margin: 0 -50px; /* делаем отрицательный margin со значеним ширины скоса */
}

  /** **/
section .section__link:nth-child(1) {
  background:...