Как нарисовать вкладку с текстом в его с помощью HTML и CSS

Question

Я хотел бы, чтобы моя закладка выглядеть ниже этого изображения:

Но я не в состоянии сделать это. Я пошел в W3Schools и посмотрел несколько обучающих онлайн, но не могу это сделать. Я даже играл с псевдоэлементами, такими как ::before и ::after, но до сих пор не повезло. Каждый выбор создает страницу.

Answer 1

Дизайн, который вы ищите, похож на тот, который описан в this answer of mine. Я отправляю отдельный ответ, потому что то, что вам нужно, немного сложнее, чем та, что связано с наличием градиентного фона, перекрытием треугольных областей (на следующем элементе) и теневой коробкой и т. Д.

Используемый подход аналогичен к этому ответу в том смысле, что к каждому элементу li добавляются два псевдоэлемента, и они искажаются в противоположных направлениях для достижения эффекта. Ниже приведены некоторые из дополнительных шагов, которые были сделаны для дизайна:

• Псевдо-элемент (:after) добавляются к ul и градиенту, который идет от полупрозрачный белого до прозрачного, а затем к полу -прозрачный черный цвет устанавливается в качестве фонового изображения. Размер этого псевдоэлемента меньше, чем у родительского контейнера ul, и это создает эффект градиента.
• Постепенно уменьшающийся z-index присваивается каждому элементу li, чтобы перенести предыдущий элемент вперед и иметь его треугольный бит над следующим элементом.
• box-shadow и border-right добавлены в элементы li:before и li:after, чтобы получить стрелку и ее тень.
• Твердая белая рамка и две box-shadow добавлены вокруг ul.

Выход реагирует так, как вы можете видеть в «полном просмотре страницы» фрагмента.

ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 60px; 
 
    color: white; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    border: 2px solid white; 
 
    border-radius: 30px; 
 
    list-style-type: none; 
 
    box-shadow: 2px 2px 0px #DDD, -2px 2px 0px #DDD; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 33.33%; 
 
    text-indent: -20px; 
 
} 
 
li:before, 
 
li:after { 
 
    position: absolute; 
 
    left: 0; 
 
    content: ''; 
 
    height: 50%; 
 
    width: 100%; 
 
    background: rgb(31, 139, 188); 
 
    border-right: 3px solid rgb(87, 153, 190); 
 
    box-shadow: 3px -2px 2px rgba(0, 0, 0, 0.15); 
 
} 
 
li:first-child:before, 
 
li:first-child:after { 
 
    background: rgb(255, 0, 0); 
 
} 
 
li:before { 
 
    top: 0px; 
 
    transform: skewX(45deg); 
 
    transform-origin: left bottom; 
 
    z-index: -1; 
 
} 
 
li:after { 
 
    bottom: 0px; 
 
    transform: skewX(-45deg); 
 
    transform-origin: left top; 
 
    z-index: -2; 
 
} 
 
li:first-child { 
 
    text-indent: 0px; 
 
    z-index: 2; 
 
} 
 
li:nth-of-type(2) { 
 
    z-index: 1; 
 
} 
 
li:last-child { 
 
    width: calc(33.33% + 15px); 
 
} 
 
ul:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 3px; 
 
    left: 3px; 
 
    height: calc(100% - 6px); 
 
    width: calc(100% - 6px); 
 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05)); 
 
    border-radius: 25px; 
 
    z-index: 3; 
 
    pointer-events: none; 
 
} 
 

 
/* if you need hover effects */ 
 

 
li:hover:before, 
 
li:hover:after { 
 
    background: yellowgreen; 
 
}

<ul> 
 
    <li>Text</li 
 
    ><li>Text</li 
 
    ><li>Text</li> 
 
    <!-- > is added in next line intentionally to avoid space between inline block elements --> 
 
</ul>

Answer 2

Можно также передать на панели навигации и прогибается.

codepen to play with или фрагмент кода ниже, чтобы запустить

nav { 
 
    display: flex; 
 
    /* basicly to help to easily spread evenly childs (float, inline-block, table, .. works too) */ 
 
    overflow: hidden; 
 
    /*might be usefull to hide links not rounded and last arrow */ 
 
    background: #0077AF; 
 
    font-size: 1.8vw; /* 2em;*/ 
 
    /* vw used for demo , i do not advise this without mediaqueries to control max and min font-size */ 
 
    padding: 0; 
 
    /* reset */ 
 
    margin: 0.5em 15px; 
 
    /* whatever */ 
 
    border-radius: 2em; 
 
    /* image was rounded */ 
 
    box-shadow: 0 0 0 3px white, 0 0 8px; 
 
    /* draw border and shadow */ 
 
    position: relative; 
 
    /* will be used for the web 2.0 glossy thing */ 
 
} 
 
nav:before { 
 
    /* the glossy thing */ 
 
    content: ''; 
 
    /* trigger pseudo */ 
 
    position: absolute; 
 
    /* off flow so to stick where needed */ 
 
    z-index: 2; 
 
    /* on top */ 
 
    pointer-events: none; 
 
    /* click through */ 
 
    border-radius: 2.5em; 
 
    /* increase border-radius because smaller than parent */ 
 
    top: 5px; 
 
    left: 10px; 
 
    right: 10px; 
 
    bottom: 0; 
 
    box-shadow: 0 -15px 18px -8px rgba(255, 255, 255, 0.5); 
 
    /* fade outside */ 
 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65), transparent, transparent 80%); 
 
    /* glossy effect drawn */ 
 
    filter: blur(3px); 
 
    /* increase a bit the blur/glossy effect, optionnal */ 
 
} 
 
a { 
 
    flex: 1; 
 
    /* fill parent and share room according to amount */ 
 
    background: inherit; 
 
    /* will be needed to blend with pseudo later */ 
 
    color: white; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
    min-width: 14em; 
 
    text-align: center; 
 
    font-family: 'Oswald', sans-serif; 
 
    /* looked close to your font-family */ 
 
    text-shadow: 2px 2px 2px #222; 
 
    padding: 1em; 
 
    margin-right: -.8em; 
 
    /* will hide arrow on last element */ 
 
    overflow: hidden; 
 
    position: relative; 
 
    /* set this to stick arrow shape */ 
 
    overflow: visible; 
 
    /* let arrow show even if outside parent */ 
 
} 
 
a:first-of-type { 
 
    margin-left: -1em; 
 
    /* optionnal */ 
 
} 
 
a:after { 
 
    /* the right arrow shape */ 
 
    content: ''; 
 
    position: absolute; 
 
    padding: 1.5em; 
 
    box-shadow: 3px -3px 3px rgba(255, 255, 255, 0.5), 5px -5px 6px -1px rgba(0, 0, 0, 0.5); 
 
    transform: rotate(45deg); 
 
    right: -1em; 
 
    /* move outside the square shape */ 
 
    top: 0.25em; 
 
    /* tune this if vertcal padding or line-height is reset or change */ 
 
    background: inherit; 
 
    /* to blend with parent */ 
 
    z-index: 1; 
 
    /* stands on top but under the glossy thing */ 
 
} 
 
/* background colors can be modified */ 
 

 
.done { 
 
    background: #FC0000; 
 
} 
 
a:hover { 
 
    background: #DDA265; 
 
} 
 
img { 
 
    display: block; 
 
    width: 100%; 
 
    /* for the show to compare to html/css render */ 
 
}

<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> 
 
<p>CSS version & hover :</p> 
 
<nav> <a href="#" class="done"> SIZE & CRUST </a> 
 
    <a href="#"> CHEEZE & SAUCE </a> 
 
    <a href="#"> TOPPINGS </a> 
 
</nav> 
 
<p>image version : 
 
    <img src="http://i.stack.imgur.com/ebD59.png" /> 
 
</p>