Tips for implementing chrome tab bar with CSS

Time:2022-1-12

This time, let’s look at a navigation bar layout with special rounded corners, as shown in the tag bar of Google Browser:

Tips for implementing chrome tab bar with CSS

How can such a layout be realized? Several methods are described below

1、 Pseudo element splicing

Suppose you have 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 way to consider is to splice two pseudo elements

Tips for implementing chrome tab bar with CSS

The fillet in the middle is relatively easy. How to realize the reverse fillet on the left and right sides? In fact, you can think about what can realize the circular style. I think of it hereborder-radius, this can be achieved

  1. Draw a transparent circle
  2. Add a large enough border or projection to the circle
  3. Cut a small part
  4. complete

The schematic diagram is as follows:

Tips for implementing chrome tab bar with CSS

Code implementation 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

Tips for implementing chrome tab bar with CSS

Cutting here is usedclip-pathImplementation. Note that the left and right can be cut a little more towards the inside to avoid gaps in splicing. The completed code can be accessedchrome-tab (codepen.io)

Of course, the reverse fillet here can also be realized by radial gradient, and then look down.

2、 Universal gradient

CSS gradients are almost omnipotent. Any graphics can be drawn. You can split them here. There are two rectangles, two circles and two reverse fillets, that is, two linear gradients and four radial gradients, as shown below

Tips for implementing chrome tab bar with CSS

Code implementation 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 has been realized, it is very wordy. Careful observation shows that,Two circles can be tiled, and two reverse fillets can be regarded as a semicircle, and then it can be tiled, as shown below

Tips for implementing chrome tab bar with CSS

In this way, only two radial gradients are required. 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 schematic diagram above)

Tips for implementing chrome tab bar with CSS

Completion code accessiblechrome-tab-gradient (codepen.io)

3、 Adaptive svg

Although gradient is omnipotent, it has a large amount of code, which is a great test of patience. For this example, SVG is also a good solution.

Tips for implementing chrome tab bar with CSS

The rounded rectangle in the middle is easy to userectAll right

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

The reverse fillets on both sides can be used directly for one segmentpathPath (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 take these three pieces of SVG code as the background, which can be usedbackground-sizeandbackground-positionAdjust and control

.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

Tips for implementing chrome tab bar with CSS

The complete code is accessiblechrome-tab-svg (codepen.io)

In addition, some people may wonder hereWhy use 3-segment SVG? Can’t you use a segment of SVG that contains three paths?The answer is No. There is no flexible use of positioning in SVG. For example, SVG can only be used to locate in the lower right corner100%Instead of usingcalc( 100% – 12px ), not to mention CSSright bottomSuch a positioning attribute, so it must be usedCSS multi backgroundrealization

4、 Picture border

The above methods are still too complicated. Can you“Cut”And? Of course, it is also possible, but it also requires some skills in order to achieve adaptation. Here you can useCSS3 border-imageTo achieve. For border image, please refer to this article:Correct usage of Jerry | border image (JD. Com)

Just prepare such a picture, SVG or PNG

Tips for implementing chrome tab bar with CSS

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 according toborder-imageJust cut according to the specification

Tips for implementing chrome tab bar with CSS

The code implementation is as follows. Remember to addborder

.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

Tips for implementing chrome tab bar with CSS

The complete code is accessiblechrome-tab-border-image (codepen.io)

Although the code implementation is relatively brief, it is difficult to control the content size due to the addition of border

5、 Mask mask

In fact, there is a problem with the previous methods of background pictures. The colors are almost fixed in the background pictures, which is inconvenient to modify. Then, with the help of mask mask, this problem can be easily solved.

With the front background (gradient or SVG will do), just putbackgroundBatch exchange-webkit-maskJust like this

Tips for implementing chrome tab bar with CSS

Take SVG as an example and replace it 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’s convenient to control the background color. If you need to change the background color, just change it directly

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

The complete code can be viewedchrome-tab-mask (codepen.io)

In addition, I like it“Cut”Can also be usedmask-borderImplementation, and the aboveborder-imageBasically consistent, but the effect of mask is obtained

Still use this picture for cutting

Tips for implementing chrome tab bar with CSS

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;
}

Tips for implementing chrome tab bar with CSS

The complete code is accessiblechrome-tab-mask-border (codepen.io)

Currently still in the draft, there is an alternative attribute-webkit-mask-box-imagehave access to

6、 Summary and description

Five different layout modes are introduced above, and the key implementation points are summarized below:

  1. border-radiuscoordinationclip-pathConcave fillet can be realized
  2. Gradient is omnipotent. Repeat the content as much as possiblebackground-repeatTo complete
  3. svginrectAdaptive rounded rectangle can be realized, which is also applicable as background
  4. You can combine multiple segmentssvgAs a multi background, the size and position are controlled respectively
  5. border-imageAdaptive effect can be achieved, and attention should be paid to the settingborder-width
  6. maskThe mask can directly use gradient or SVG as the mask layer, which makes it easier to modify the background color
  7. mask-borderandborder-imageUse similar, but currently only-webkit-Kernel support

Each has its own characteristics. For example, gradient is omnipotent, but the implementation is the most cumbersome. Although SVG is simple, it also has limitations (the rounded rectangle in the middle is not supported by other shapes). It is mainly a pioneering thinking. You can choose according to your actual needs. You can also consider these aspects when you encounter other layouts next time. Finally, if you think it’s good and helpful to you, you’re welcome to like, collect and forward ❤❤❤