少し難しい矢印デザインCSS02-2

こんにちは。
先週は三角関数の計算方法について書きました。今日はその続きでコードについて書いていきます。

ちなみに矢印のデザインはこんな感じでしたね↓

あとは、このように画面を縮めても崩れません。
文字が増えすぎると崩れてしまいますが、今回はそこまで文字が増えないことを仮定しています。

ではさっそくコードを見ていきましょう〜！

コード

HTML編

         <div class="stepBlock">
          <ol class="itemList">
            <li>
              <div class="liInner">
                <div class="step">STEP1</div>
                <div class="tit">
                  テキストが入りますテキストが入りますテキストが入りますテキストが入ります
                </div>
              </div>
            </li>
            <li>
              <div class="liInner">
                <div class="step">STEP2</div>
                <div class="tit">
                  <div class="titInner">テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</div>
                </div>
              </div>
            </li>
            <li>
              <div class="liInner">
                <div class="step">STEP3</div>
                <div class="tit">
                  <div class="titInner">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</div>
                </div>
              </div>
            </li>
          </ol>
        </div>

CSS編

あとで見返しやすいようにsassで失礼しますm(_ _)m

.stepBlock
{
  color: #fff;
  .itemList
  {
    line-height: 1.4;
    > li
    {
      box-sizing: border-box;
      &:first-child,
      &:nth-child(2)
      {
        .liInner
        {
          &:before,
          &:after
          {
            position: absolute;
            display: block;
            content: "";
          }
        }
      }
    }
    .liInner
    {
      position: relative;

      border: 1px solid #fff;
    }
    .step
    {
      position: absolute;
      top: 0;
      background: #007EA7;
      transform: translateY(-50%);
      padding: 0 .4em;
    }
    .tit
    {
    }
  }
}


@include mq-pc
{
  .stepBlock
  {
    .itemList
    {
      display: flex;

      margin: 0 -22px;
      > li
      {
        padding: 0 22px;

        &:first-child,
        &:nth-child(2)
        {
          .liInner
          {
            border-right: none;
            &:before,
            &:after
            {
              right: 0;

              width: 1px;
              height: 50%; //a部分

              background-color: #fff;
            }
            &:before
            {
              top: 0;

              transform: scale(1.064178) rotate(-20deg); //先週で求めた値を使用
              transform-origin: 0 0; //変化の基準点
            }
            &:after
            {
              bottom: 0;

              transform: scale(1.064178) rotate(20deg); //先週で求めた値を使用
              transform-origin: 0 100%; //変化の基準点
            }
          }
        }

        &:first-child
        {
          width: 30%; //数値はデザイン通りに
        }
        &:nth-child(2)
        {
          width: 36%; //数値はデザイン通りに
        }
        &:nth-child(3)
        {
          flex: 1;
          .liInner
          {
            padding-right: 20px;
          }
          .tit
          {
          }
        }
      }
      .liInner
      {
        box-sizing: border-box; //リスト3つの高さが揃う
        height: 100%; //リスト3つの高さが揃う
        padding: 15px 15px 13px 35px;
      }
      .step
      {
        left: 26px;

        font-size:1.4rem;
      }
      .tit
      {
        font-size:1.8rem;
      }
    }
  }
}

sassなので見づらい部分もあるかと思いますが、ポイントはコメントアウトでメモしています。

transformプロパティの箇所で前回計算で求めた値を使用しており、変化の基準点を指定することが重要かなと思います！

では今日はここまで〜