弧形选项卡

原创

已于 2024-02-29 15:36:37 修改 · 1.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #react #开发语言 #vscode

于 2024-02-29 10:42:23 首次发布

文章介绍了如何使用CSS、伪元素和径向渐变在AntD组件中创建弧形选项卡，同时提到了使用clip-path的问题以及实现时的注意事项，包括浏览器兼容性问题和针对不同选项卡的处理方法。

该文章已生成可运行项目，

前言：利用css实现弧形选项卡（这种效果应该也有组件是支持的吧，有知道的同学请把包放在评论区，极其需要），具体要实现的效果参考给出的设计稿。之前看过文章，实现的思路是两个伪元素+径向渐变+transform，我这个实现稍微有点不一样（主要是那个弧度达不到设计稿要求）。

设计效果

这个效果可以直接切图来实现，但考虑到内容变换的话，切图效果适应会有些生硬，这里用css实现，不过也没有100%实现，弧度还是有点区别，具体看效果吧。

实现代码

组件代码（ts）

import React, { useEffect } from 'react'
import styles from "./index.less"
import { Col, Row } from 'antd'

const cardList_text = [
	{ id: "one", src: "orange", title: "选项卡1", isMain: true, msg: "副标题1" },
	{ id: "two", src: "green", title: "选项卡2", isMain: false, msg: "副标题2" },
	{ id: "three", src: "purple", title: "选项卡3", isMain: false, msg: "副标题3" },
]



const TitleTabs = () => {

	useEffect(()

本文章已经生成可运行项目