CSS로 DIV 계단 그리기

위 이미지는 회사 홈페이지에 들어가는 이미지 중에 하나인데,

첨에 빨리 만들어야해서 거진 다 포토샵에서 작업해서 jpg 배경 처리하고,
텍스트 부분만 position: absolute 놓고 top이랑 left 값 조정해서 만들었다.

머 대충 이런 느낌이다.

 

 

갑자기 이걸 CSS로도 구현할 수 있지 않을까? 싶어서 작업에 들어갔는데
마름모꼴 만들기가 너무 힘들었다 ... 어찌어찌 만들어도 그 위에 텍스트까지 변형할 자신이 없었고...
그래서 모양을 살짝 바꿨다.

음~ 지금보니 그림자를 안넣었네. 하지만 넘모 귀찮고..
만약 계단쪽에 그림자를 넣으려면 box-shadow로 넣으면 깨지고 난리나니
계단을 똑같이 만들어서 뒷쪽으로 배치하는 것이 좋겠다.

 

 

 

HTML

  <div id="content">

    <div id="contentBG">
      <div class="tread no00"></div>
      <div class="tread no01"></div>
      <div class="tread no02"></div>
      <div class="tread no03"></div>
      <div class="riser no01">01</div>
      <div class="riser no02">02</div>
      <div class="riser no03">03</div>
      <div class="riser no04"></div>
    </div>

    <div id="contentTxt">
      <div class="steps">
        <div class="stepLeft">
          <span class="stepTtl">STEP 01</span><br>
          <span class="stepSub">A/S 문의사항<br>신속한 접수·처리</span>
        </div>
        <div class="stepRight">
          <div class="stepPoint"></div><div class="stepArrow"></div>
        </div>
      </div>
      <div class="steps">
        <div class="stepLeft">
          <span class="stepTtl">STEP 02</span><br>
          <span class="stepSub">3개월 단위로<br>정기적인 관심콜 서비스</span>
        </div>
        <div class="stepRight">
          <div class="stepPoint"></div><div class="stepArrow"></div>
        </div>
      </div>
      <div class="steps">
        <div class="stepLeft">
          <span class="stepTtl">STEP 03</span><br>
          <span class="stepSub">완공 후 2년간 고객보다 먼저<br>움직이는 방문점검 서비스</span>
        </div>
        <div class="stepRight">
          <div class="stepPoint"></div><div class="stepArrow"></div>
        </div>
      </div>
    </div>

  </div>

 

CSS

* { font-family: 'NanumSquare', sans-serif; box-sizing: border-box;}

#content { width: 1200px; height: 650px; position: relative; margin: 70px auto 85px; }

#contentTxt { position: absolute; top: 0;}
#contentTxt .steps { width: 350px; height: 130px; position: absolute; text-align: right; line-height: 150%;}
.steps:nth-child(1) { top:310px; Left: 130px; }
.steps:nth-child(2) { top:180px; Left: 240px; }
.steps:nth-child(3) { top:50px; Left: 350px; }

.stepLeft { float: left; width: 55%; }
.steps .stepTtl { font-size: 20pt; font-weight: bold; line-height: 160%;}
.steps:nth-child(1) .stepTtl { color: #e19474 }
.steps:nth-child(2) .stepTtl { color: #d73f17 }
.steps:nth-child(3) .stepTtl { color: #c30f23 }
.steps .stepSub { font-size: 12pt; color: #626262;}

.stepRight { float: left; margin: 18px 0 0 10px; width: 125px; height: 100px; }
.steps:nth-child(1) .stepRight { border: solid 3px #e19474; border-left: none; border-bottom: none; }
.steps:nth-child(2) .stepRight { border: solid 3px #d73f17; border-left: none; border-bottom: none; }
.steps:nth-child(3) .stepRight { border: solid 3px #c30f23; border-left: none; border-bottom: none; }

.stepPoint { position: absolute; top: 10px; width: 20px; height: 20px; border-radius: 20px;}
.steps:nth-child(1) .stepPoint { background: #e19474 }
.steps:nth-child(2) .stepPoint { background: #d73f17 }
.steps:nth-child(3) .stepPoint { background: #c30f23 }
/*역삼각형은 border값 조절해서*/
.stepArrow { position: absolute; bottom: 0; right: 12pt; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.steps:nth-child(1) .stepArrow { border-top: 18px solid #e19474;}
.steps:nth-child(2) .stepArrow { border-top: 18px solid #d73f17;}
.steps:nth-child(3) .stepArrow { border-top: 18px solid #c30f23;}

#contentBG { width: 980px; height: 650px; background: whitesmoke; border: 1px solid lightgrey; margin: 0 auto; }
.riser { width: 200px; height: 90px; position: absolute; text-align: left; font-size: 3rem; font-weight: 800; line-height: 90px; color: white; }
.riser.no01 { bottom: 95px; left: 450px; background: #D76F42; padding-left: 20px; }
.riser.no02 { bottom: 225px; left: 560px; background: #C6251E; padding-left: 20px; }
.riser.no03 { bottom: 355px; left: 670px; background: #9f2125;padding-left: 20px;}
/*화살표모양은 before나 after를 추가해서*/
.riser.no04 { height: 50px; top: 115px; left: 779px; background: #c9c9c9;}
.riser.no04::before { border-bottom: 55px solid #c9c9c9; border-left: 120px solid transparent; border-right: 120px solid transparent; content: ""; height: 0; left: -20px; position: absolute; top: -55px; width: 0;}
/*평행사변형은 transform:skewX 또는 skewY*/
.tread { position: absolute; width: 200px; height: 40px; transform:skewX(-70deg); }
.tread.no00 { bottom: 55px; left: 395px; background: #c9c9c9; }
.tread.no01 { bottom: 185px; left: 505px; background: #e19474; }
.tread.no02 { bottom: 315px; left: 615px; background: #d73f17; }
.tread.no03 { bottom: 445px; left: 725px; background: #c30f23; }

 

CSS 작성하면서 반복되는게 너무 많아갖고 SASS를 얼른 배워야겠다.. 그런 생각이 드는 미니 플젝이었습니당.