使用纯css实现,两个相邻的tab标签,中间有弧度分开
时间: 2024-05-06 11:18:02 浏览: 17
可以使用伪元素 `::before` 和 `::after` 来实现两个相邻的标签之间的弧度效果。
首先,我们需要定义两个相邻的标签的样式:
```html
<div class="tab-container">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
```
```css
.tab-container {
display: flex;
}
.tab {
padding: 10px 20px;
background-color: #ccc;
border: 1px solid #999;
border-bottom: none;
position: relative;
}
.tab.active {
background-color: #fff;
}
.tab::before,
.tab::after {
content: "";
position: absolute;
height: 100%;
width: 20px;
background-color: #ccc;
z-index: -1;
}
.tab::before {
left: -10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.tab::after {
right: -10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
```
这里的 `.tab` 类是表示标签的样式,`.tab.active` 表示当前选中的标签。我们使用了 `position: relative` 来让伪元素相对于标签本身进行定位,并使用 `z-index` 来使它们在标签后面。
然后,我们为 `.tab::before` 和 `.tab::after` 定义样式。它们的 `content` 属性是必需的,即使我们不需要显示任何内容。接着,我们使用 `position: absolute` 来使它们相对于 `.tab` 进行定位,使用 `height: 100%` 来让它们的高度与 `.tab` 相同,使用 `width` 来控制它们的宽度。
在 `.tab::before` 中,我们使用 `left: -10px` 来将它向左移动,并使用 `border-top-right-radius` 和 `border-bottom-right-radius` 来定义右侧的弧度。在 `.tab::after` 中,我们使用 `right: -10px` 来将它向右移动,并使用 `border-top-left-radius` 和 `border-bottom-left-radius` 来定义左侧的弧度。
这样,我们就可以实现两个相邻标签之间的弧度分开效果了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)