Draw vertically inclined parallelogram with text in css

Question

I am trying to create a parallelogram kind of box aligned in a row and text inside it. But the styles I tried are not producing the exact designs that I want to achieve.

Whenever I try to increase the width of the content div, that's increasing the space between those items. Below is the code I tried and got this.

body {
  background: grey;
}
.col {
    display: flex;
    position: relative;
}

.y-axis-label {
    transform: rotate(35deg);
    white-space: nowrap;
    position: relative;
    display: flex;
    font-size: 11px;
    border-radius: 4px;
    padding: 4px;
    width: 35px;
    justify-content: flex-end;
    right: 0px;
    top: 18px;
}

.y-axis-label-text {
    background: white;
    padding: 0px 4px;
    border-radius: 4px;
    height: fit-content;
    clip-path: polygon(0 0, 100% 0%, 83% 100%, 0% 100%);
}

<div>
  <div class="col">
    <div class="y-axis-label">
      <span class="y-axis-label-text">Development</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">Testing</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">Management</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">Marketing</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">QA</span>
    </div>
  </div>
</div>

I tried using transform: skew and that's changing the text inside of it. Can someone help me on achieving this?

Ouroborus · Accepted Answer · 2023-07-19 06:46:34Z

body {
  background: grey;
}
.col {
    outline: solid 1px red;
    overflow: hidden;
    padding-left: 40px;
    height: 80px;
}

.y-axis-label {
    transform: rotate(-35deg);
    white-space: nowrap;
    display: inline-block;
    font-size: 11px;
    padding: 4px;
    height: 100px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: right;
}

.y-axis-label-text {
    display: inline-block;
    background: white;
    padding: 20px 2px;
    height: 120px;
    transform: translateY(-70px);
}

<div>
  <div class="col">
    <div class="y-axis-label">
      <span class="y-axis-label-text">Development</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">Testing</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">Management</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">Marketing</span>
    </div>
    <div class="y-axis-label">
      <span class="y-axis-label-text">QA</span>
    </div>
  </div>
</div>

Important part is:

writing-mode: vertical-rl;
text-orientation: mixed;

After that, it's messing around with with stuff to get the right effect.

Note: Coloring and outlines are there to better show how it's laid out. You can remove the outline and add backgrounds as needed.

Collectives™ on Stack Overflow

Draw vertically inclined parallelogram with text in css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related