플로우(flow) 다이어그램 만들기

사각형과 삼각형을 합친 형태로 가상요소인 after, before를 동시에 사용하여 순서, 흐름을 표현해보도록 하겠습니다.  

플로우 만들기(예시)

HTML

먼저 자식 요소들을 감싸주는 태그를 지정합니다. 
그 안에 플로우 요소(태그)들을 추가해나갑니다.

<div class="step-box">
    <p class="step">배송시작</p>
    <p class="step">배송중</p>
    <p class="step">배송완료</p>
</div>

CSS

위 그림에서 보이는 것 처럼 왼쪽에서 오른쪽으로 가는 형태이므로, 부모요소를 flex로 감싸줍니다.
예시는 3개로 구성되어있기 때문에 폭을 약 33%로 지정해준 후, 각 스텝마다 after와 before를 삼각형으로 만들어줍니다.
before삼각형은 after삼각형의 뒤에 배치되므로 포지션을 옮겨가면서 위치를 조정합니다.

.step-box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: calc(100% - 25px);
    margin-bottom: 40px;
}

.step-box .step {
    position: relative;
    width: 33%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff0cc;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.step-box .step::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #fff0cc;
    left: 100%;
    z-index: 1;
}

.step-box .step::before {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #fff;
    left: 0;
}

.step-box .step:first-child::before {
    display: none;
}

.step-box .step:nth-child(2) {
    background-color: #ffe29f;
}

.step-box .step:nth-child(2)::after {
    border-color: transparent transparent transparent #ffe29f;
}

.step-box .step:last-child {
    background-color: #ffd67a;
}

.step-box .step:last-child::after {
    border-color: transparent transparent transparent #ffd67a;
}

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받고 있습니다