부트스트랩 carousel-indicators 모양에 관해서

부트스트랩 carousel-indicators 모양에 관해서

QA

부트스트랩 carousel-indicators 모양에 관해서

본문

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

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

832838671_1656978734.452.png

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

 

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

832838671_1656978780.092.png

 

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

832838671_1656978855.7691.png

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

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

현재 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:50%; 여기를 px 로 바꿔보세요~

답변을 작성하시기 전에 로그인 해주세요.
전체 205
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT