테스트 사이트 - 개발 중인 베타 버전입니다

부트스트랩 carousel-indicators 모양에 관해서 채택완료

에쥬 3년 전 조회 2,145

부트스트랩을 공부중인데요. 

커러셀 인디케이터 모양을 바꾸고 싶은데 생각대로 되지 않아서 고수님들의 조언을 구하고자 합니다.

위 그림에서 주황색 인디케이터 모양을 바꾸고 싶어서 공부중인데요.

 

아래 그림처럼 바꾸긴 했는데요.

 

액티브 인디케이터 모양이 약간 타원처럼 되있는 부분을, 아래 그림처럼 바꾸고 싶은데 도저히 안됩니다.

붉은색 길죽한 모양처럼 양끝은 완전 반원처럼 하고 싶거든요...근데 이게 안되네요.

고수님들의 조언 부탁드립니다.

현재 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개

채택된 답변
+20 포인트
m
3년 전

border-radius:5px; 로 수정하시고 

border-top, border-bottom: 삭제 하면 나오네요... 

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

답변에 대한 댓글 1개

에쥬
3년 전
너무너무 감사합니다...됐습니다. ^^ 좋은 하루되세요...감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

육기경훈

border-radius:5px로 하시면 될듯합니다.

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

댓글을 작성하려면 로그인이 필요합니다.

m
3년 전

 border-radius:50%; 여기를 px 로 바꿔보세요~

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

답변에 대한 댓글 1개

에쥬
3년 전
잘안되네요...
그렇게 했더니 동그란 인디케이터가 다 사각형으로 바뀌고, 활성 인디케이터는 그대로인거 같습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인