Список по диагонали

Question

Как можно сделать такой список по диагонали? Спасибо!

Answer 1

Цвет можно через атрибут style прямо в html прописать в принципе для list__item

.list__item {
    display: flex;
    align-items: flex-start
}

.list__item:first-child {
    color: red
}

.list__item:nth-child(2) {
    color: yellow
}

.list__item:nth-child(3) {
    color: green
}

.list__number {
    width: 22px;
    line-height: 22px;
    text-align: center;
    border: 3px solid
}

.list__label {
    margin-top: 26px;
    border-bottom: 3px solid;
    padding: 3px 10px;
    transform: rotate(29deg)
}

<div class="list">
    <div class="list__item">
        <div class="list__number">1</div>
        <div class="list__label">КРАСНЫЙ</div>
    </div>
    <div class="list__item">
        <div class="list__number">2</div>
        <div class="list__label">ЖЕЛТЫЙ</div>
    </div>
    <div class="list__item">
        <div class="list__number">3</div>
        <div class="list__label">ЗЕЛЕНЫЙ</div>
    </div>
</div>

Answer 2

ol.squared {
  counter-reset: li;
  margin: 2em 0 0 5em;
  padding: 0;
}

ol.squared li {
  list-style: none;
  position: relative;
  display: inline-block;
  width: 5.2em;
  margin: 0;
  padding: 0.2em 0.4em;
  border-bottom: 0.2em solid;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
  font-weight: bold;
  font-size: 1.5em;
  text-transform: uppercase;
}

ol.squared li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: 0.7em;
  left: -2.2em;
  box-sizing: border-box;
  width: 2em;
  margin-right: 0.4em;
  padding: 0.2em;
  border: 0.2em solid;
  font-weight: bold;
  text-align: center;
  transform: rotate(-45deg);
}

ol.squared li.red,
ol.squared li.red:before {
  color: indianred;
  border-color: indianred;
}

ol.squared li.yellow,
ol.squared li.yellow:before {
  color: darkorange;
  border-color: darkorange;
}

ol.squared li.green,
ol.squared li.green:before {
  color: yellowgreen;
  border-color: yellowgreen;
}

h1 {
  font-size: 30px;
}

ol.squared {
  font-size: 16px;
}

<ol class="squared">
  <li class="red">Красный</li>
  <li class="yellow">Желтый</li>
  <li class="green">Зеленый</li>
</ol>

БЛОГ НА HUSL

Список по диагонали

Ответы (2 шт):