목록으로

점선으로 세로 자동으로 조절 채택완료

탐크루지

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전 조회 2,996

답변 2

아래의 페이지처럼 일정표 부분에서

좌측에 점선으로 쭈욱 연결되는 표현을 어떻게 할 수 있을까요?

핀 이미지가 보이고 아래로는 점선으로 일정들이 쭈욱 나오는데요..

https://www.verygoodtour.com/Product/PackageDetail?ProCode=JPP0808-250401LJ&PriceSeq=0&menuCode=101160501

도와주시면 감사하겠습니다.

#css

답변 2개

정렬:

채택된 답변

+20 포인트

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

Copy

<style>
#detail-wrap {
    position: relative;
    height: 20em;
    background-color: #ddd;
}

#detail-wrap .courseWrap {
    padding: 2em;
}

#detail-wrap .courseWrap .course:before {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: radial-gradient(transparent 25%, black 25%);
    border-radius: 50% 50% 0 50%;
    transform: rotate(45deg) scale(0.8);
}
#detail-wrap .courseWrap .course:after {
    display: block;
    content: '';
    height: calc(100% - 36px);
    position: absolute;
    bottom: 5px;
    left: 11px;
    border: 1px dashed #31374f;
}
</style>

<div id="detail-wrap">
    <div class="courseWrap">
        <div class="course region">
            <h4>h4</h4>
            <div class="con">con</div>
        </div>
        <div class="course region">
            <h4>h4</h4>
            <div class="con">con</div>
        </div>
    </div>
</div>

로그인 후 평가할 수 있습니다