부트스트랩 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 로 바꿔보세요~
잘안되네요...
그렇게 했더니 동그란 인디케이터가 다 사각형으로 바뀌고, 활성 인디케이터는 그대로인거 같습니다.
