부트 스트랩 탭의 사용자 정의 스타일

기본 부트 스트랩 탭 스타일을 변경하려고합니다. 그래서 내 사용자 정의 스타일은이 이미지의 스타일과 비슷해야합니다. 부트 스트랩 탭의 사용자 정의 스타일

enter image description here

나는 이런 식으로 시도했지만 제대로 동작하지 않습니다. 가장 중요한 점은 각 탭의 하단을 비뚤어지게하지 않는 것입니다. 코드와

.content .nav-tabs { 
    background: #dd5b5b; 
    padding: 15px 0 0 0; 
} 
.content .nav-tabs > li > a { 
    padding: 5px 40px; 
    background: #eaedf2; 
    border: 1px solid #a48686; 
    border-bottom: none; 
    border-top-right-radius: 2em; 
    border-top-left-radius: 1.5em; 
}

JS BIN 지금까지

사람이 순수 CSS를 사용하여 위의 이미지와 같은 출력을 얻을하는 데 도움이 수 있습니까?

감사합니다.

출처

2014-07-07 TNK

가까이에있는 것처럼 보이지만 그라디언트를 추가해야하고 화살표에 부트 스트랩 또는 요새 아이콘을 사용할 수 있습니다. 잠재적으로 색을 변경하는 화살표에 대해 jQuery를 사용해야하지만, 각 탭이 새 페이지를로드하는 경우 각 페이지의 단일 탭에'활성 '클래스 만있을 수 있습니다. – Dan

@ Dan 예. 그것은 가깝고 그라디언트와 아이콘은 괜찮습니다. 내 문제는 탭 모양입니다. – TNK

부트 스트랩을 사용하면 탭과 동작을 쉽게 사용자 정의 할 수 있습니다.

색상은 원하는대로 CSS에서 그라디언트를 사용하여 해당 클래스에서 작업하는 것이 좋습니다. 여기에 좋은 생성기입니다 : 아이콘의 경우 http://www.colorzilla.com/gradient-editor/

, 당신은 단지 FontAwesome (http://fontawesome.io/icons/) 또는 유사한 webfont를 사용할 수 있습니다.

출처

2017-04-26 15:35:17

부트 스트랩 탭의 사용자 정의 스타일

답변

관련 문제