부트스트랩 carousel-indicators 모양에 관해서
본문
부트스트랩을 공부중인데요.
커러셀 인디케이터 모양을 바꾸고 싶은데 생각대로 되지 않아서 고수님들의 조언을 구하고자 합니다.
위 그림에서 주황색 인디케이터 모양을 바꾸고 싶어서 공부중인데요.
아래 그림처럼 바꾸긴 했는데요.
![]()
액티브 인디케이터 모양이 약간 타원처럼 되있는 부분을, 아래 그림처럼 바꾸고 싶은데 도저히 안됩니다.
![]()
붉은색 길죽한 모양처럼 양끝은 완전 반원처럼 하고 싶거든요...근데 이게 안되네요.
고수님들의 조언 부탁드립니다.
현재 CSS를 올려놓겠습니다. 한번 봐주세요.ㅠㅠ;
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
.carousel-indicators [data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: 10px;
height: 10px;
border-radius:50%;
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: white;
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: .8;
transition: opacity .6s ease;
}
.carousel-indicators .active{
width: 40px;
height: 10px;
background-color: #35c5f0;
}
답변 3
border-radius:5px; 로 수정하시고
border-top, border-bottom: 삭제 하면 나오네요...
border-radius:5px로 하시면 될듯합니다.
border-radius:50%; 여기를 px 로 바꿔보세요~