점선으로 세로 자동으로 조절
본문
아래의 페이지처럼 일정표 부분에서
좌측에 점선으로 쭈욱 연결되는 표현을 어떻게 할 수 있을까요?
핀 이미지가 보이고 아래로는 점선으로 일정들이 쭈욱 나오는데요..
도와주시면 감사하겠습니다.
답변 2
<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>
아고 감사드립니다. 너무 좋습니다.
점선은 특별한건 아니고 border에 dashed 스타일입니다. css로 다른 부분들을 조절해서 테두리 부분을 해당으로 처리 한겁니다.
답변을 작성하시기 전에 로그인 해주세요.