CSS tips for implementing Chrome tab bar

This time let’s look at a navigation bar layout with special rounded corners, such as the tab bar of Google Chrome:

How to achieve such a layout? Here are a few methods

1. Pseudo-element splicing

Assume there is such an HTML structure

<nav class="tab">
  <a class="tab-item">Svelte API</a>
  <a class="tab-item active">Svelte API</a>
  <a class="tab-item">Svelte API</a>
  <a class="tab-item">Svelte API</a>
</nav>

The first method that can be considered is to use two pseudo elements to splice

The rounded corners in the middle are relatively easy, but how to achieve the reverse rounded corners on the left and right sides? In fact, you can think about what styles can be used to achieve a circle. Here I think of border-radius, which can be achieved like this

• Draw a transparent circle
• Add a large enough border or shadow to the circle
• Crop a small part
• Finish

The following is an example

The code to achieve this is

.tab-item{
  position: relative;
  background-color: red;
  padding: 10px 15px;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  transition: .2s;
}
.tab-item::before,.tab-item::after{
  position: absolute;
  bottom: 0;
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0 0 0 40px red;/*Using box-shadow does not affect the size*/
  transition: .2s;
}
.tab-item::before{
  left: -20px;
  clip-path: inset(50% -10px 0 50%);
}
.tab-item::after{
  right: -20px;
  clip-path: inset(50% 50% 0 -10px);
}

The final real-time effect is as follows

Here, clipping is achieved using clip-path. Note that you can clip a little more inwards to avoid gaps in the stitching. To complete the code, visit chrome-tab (codepen.io)

Of course, the reverse rounded corners here can also be achieved using radial gradient, so let’s continue reading.

2. Universal Gradient

CSS gradients are almost omnipotent and can draw any graphics. Here we can split them into two rectangles, two circles, and two reverse rounded corners, that is, 2 linear gradients and 4 radial gradients, as shown below.

The code to achieve this is

.tab-item{
  padding: 10px 35px;
  background-image: 
    radial-gradient(circle at 0 0, transparent 15px,blue 0),
    radial-gradient(circle at 0 0, transparent 15px,blue 0),
    radial-gradient(circle at 0 0, green 12px, transparent 0,
    radial-gradient(circle at 12px 0, green 12px, transparent 0,
    linear-gradient(red,red),
    linear-gradient(red,red);
  background-repeat: no-repeat;
  background-position: 15px top, right 15px top 0, left bottom, right bottom, center bottom, center, bootom;
  background-size: 30px 30px, 30px 30px, 12px 12px, 12px 12px, calc(100% - 30px) calc(100% - 12px), calc(100% - 54px) 100%;
}

Although it is implemented, it is very long-winded. After careful observation, it is found that the two circles can be realized by tiling. The two reverse fillets can be regarded as a semicircle, which can also be tiled, as shown below

In this way, only two radial gradients are needed to achieve it. The code is as follows

.tab-item{
  position: relative;
  padding: 10px 35px;
  cursor: pointer;
  background-image: radial-gradient(circle at 15px 0, transparent 15px,blue 0),
    radial-gradient(circle at 27px 12px, green 12px, transparent 0),
    linear-gradient(red,red),
    linear-gradient(red,red);
  background-size: 100% 15px,calc(100% - 54px), calc(100% - 30px) calc(100% - 12px), calc(100% - 54px) 100%;
  background-position: -15px bottom, left top, center bottom, center bottom;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
}

The final real-time effect is as follows (the above is the schematic diagram)

Complete code can be found at chrome-tab-gradient (codepen.io)

3. Adaptive SVG

Although gradients are versatile, they require a lot of code and are very demanding on your patience. For this example, svg is also a good solution.

The rounded rectangle in the middle is easier, just use rect

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>   
	<rect rx="12" width='100%' height='100%' fill="#3A8EFF"/>
</svg>

The reverse rounded corners on both sides can be directly created using a path (which can be generated by various graphics software)

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 100C55.2285 100 100 55.2285 100 0V100H0Z" fill="#3A8EFF"/>
</svg>

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M100 100C44.7715 100 0 55.2285 0 0V100H100Z" fill="#3A8EFF"/>
</svg>

Then use these three svg codes as the background. You can use background-size and background-position to adjust and control them.

.tab-item{
  position: relative;
  padding: 10px 35px;
	margin: 0 -15px;
  cursor: pointer;
  transition: .2s;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' fill='%23F8EAE7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' fill='%23F8EAE7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='12' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
  background-size: 12px 12px, 12px 12px, calc(100% - 24px) calc(100% + 12px);
  background-position: right bottom, left bottom, center top;
  background-repeat: no-repeat;
}

The real-time effect is as follows

The full code can be found at chrome-tab-svg (codepen.io)

In addition, some people may wonder why three segments of SVG are used here? Can't I use 1 svg to contain 3 paths? **The answer is no. There is no way to use positioning flexibly in SVG. For example, if you want to place it in the lower right corner, SVG can only use 100% instead of calc (100% - 12px), not to mention that CSS also has positioning attributes such as right bottom, so CSS multiple backgrounds must be used to achieve it.

4. Picture border

The above methods are still too complicated. Can we "cut the picture"? Of course it is possible, but it also requires certain skills to achieve adaptation. CSS3 border-image can be used here to achieve this. For information about border-image, please refer to this article: JELLY | Correct usage of border-image (jd.com).

Just prepare a picture like this, svg or png will do

svg is as follows

<svg width="67" height="33" viewBox="0 0 67 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716-15-15v-6c0-6.627-5.373-12-12-12H27z" fill="#F8EAE7"/>
</svg>

Then just cut it according to the border-image specification

The code is implemented as follows, remember to add border

.tab-item{
  position: relative;
  padding: 0 8px;
  margin: 0 -15px;
  cursor: pointer;
  border-width: 12px 27px 15px;
  border-style: solid;
  border-image: url("data:image/svg+xml,%3Csvg width='67' height='33' viewBox='0 0 67 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716-15-15v-6c0-6.627-5.373-12-12-12H27z' fill='%23F8EAE7'/%3E%3C/svg%3E") 12 27 15 fill;
}

The real-time effect is as follows

The full code can be found at chrome-tab-border-image (codepen.io)

Although the code implementation is relatively simple, the content size is difficult to control due to the need to add borders.

5. Mask

The previous methods of using background images actually have a problem. The colors are all in the background image and are almost fixed, making it inconvenient to modify. So, with the help of mask, this problem can be easily solved.

With the previous background (gradient or svg is fine), you only need to batch change the background to -webkit-mask, like this

Taking svg as an example, the replacement is as follows

.tab-item{
  position: relative;
  padding: 10px 35px;
  cursor: pointer;
  background: #F8EAE7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' fill='%23F8EAE7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' fill='%23F8EAE7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='12' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
  -webkit-mask-size: 12px 12px, 12px 12px, calc(100% - 24px) calc(100% + 12px);
  -webkit-mask-position: right bottom, left bottom, center top;
  -webkit-mask-repeat: no-repeat;
}

Now it is easy to control the background color. If you need to change the background color, just change it directly.

.tab-item:hover{
  background: #F2D0CA;
}

The full code can be found at chrome-tab-mask (codepen.io)

In addition, if you like **"cutting pictures"**, you can also use mask-border, which is basically the same as border-image above, but with a masking effect.

Or use this picture to cut

The code implementation is

.tab-item{
  /*...*/
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='67' height='33' viewBox='0 0 67 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716-15-15v-6c0-6.627-5.373-12-12-12H27z' fill='%23F8EAE7'/%3E%3C/svg%3E") 12 27 15;
} 

The full code can be found at chrome-tab-mask-border (codepen.io)

Currently still in draft, there is an alternative property -webkit-mask-box-image that can be used

VI. Summary and explanation

The above introduces 5 different layout methods. The following summarizes the key points of implementation:

1. Border-radius combined with clip-path can achieve concave rounded corners
2. Gradients are universal. Repeated content should be completed through background-repeat as much as possible.
3. The rect in svg can realize an adaptive rounded rectangle, which is also applicable as a background
4. You can use multiple SVGs as multiple backgrounds, and control the size and position of each
5. border-image can achieve adaptive effect, you need to pay attention to setting border-width
6. Mask can directly use gradient or svg as the mask layer, which can more conveniently modify the background color
7. mask-border is similar to border-image, but currently only supported by -webkit- kernel

This is the end of this article about the techniques of implementing Chrome tab bar with CSS. For more relevant CSS Chrome tab bar content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!