Спасибо тебе, Буравчик. )

Помогите раскрасить табы как на рисунке?

Здравствуйте, Funny Rabbit, Вы писали:


FR>Спасибо тебе, Буравчик. )

FR>Помогите раскрасить табы как на рисунке?
FR>Image: хеадер.png

Вопрос не понятен. А как у тебя сейчас выглядят табы, где код?

Здравствуйте, Буравчик, Вы писали:

Б>Здравствуйте, Funny Rabbit, Вы писали:


FR>>Спасибо тебе, Буравчик. )

FR>>Помогите раскрасить табы как на рисунке?
FR>>Image: хеадер.png

Б>Вопрос не понятен. А как у тебя сейчас выглядят табы, где код?

<ul class="nav nav-tabs w-100" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true">Отдел продаж</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Администрация</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Адреса и реквизиты</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="four-tab" data-toggle="tab" href="#four" role="tab" aria-controls="Four" aria-selected="false">Екатеринбург офис</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="five-tab" data-toggle="tab" href="#five" role="tab" aria-controls="Five" aria-selected="false">Страничка директора</a>
                </li>
              </ul>
            </div>

            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
                <h5 class="card-title">1</h5>
                <p class="card-text">Немного текста</p>            
              </div>
              
              <div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab">
                <h5 class="card-title">2</h5>
                <p class="card-text">Немного текста</p>            
              </div>
              
              <div class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab">
                <h5 class="card-title">3</h5>
                <p class="card-text">Немного текста</p>            
              </div>
                      
              <div class="tab-pane fade p-3" id="four" role="tabpanel" aria-labelledby="four-tab">
                <h5 class="card-title">4</h5>
                <p class="card-text">Немного текста</p>            
              </div>
              
              <div class="tab-pane fade p-3" id="five" role="tabpanel" aria-labelledby="five-tab">
                <h5 class="card-title">5</h5>
                <p class="card-text">Немного текста</p>            
              </div>

Случайно не тебе в соседней теме посоветовали использовать jsfiddle?

Здравствуйте, MozgC, Вы писали:

MC>Случайно не тебе в соседней теме посоветовали использовать jsfiddle?

https://jsfiddle.net/t15s3g2L/

Здравствуйте, Funny Rabbit, Вы писали:

FR>Здравствуйте, MozgC, Вы писали:

MC>>Случайно не тебе в соседней теме посоветовали использовать jsfiddle?

FR>https://jsfiddle.net/t15s3g2L/

Можно попытаться на основе этого сделать:


Код:
http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/