Html 如何使CSS半透明的两个形状看起来像一个？ 问题

我用CSS画了两个重叠的图形。 因为它是半透明的，重叠的部分非常突出。 我想让它在悬停时像这样半透明，但是我们可以做一些像合成数字这样的事情吗

我还注意到，两个数字的过渡终点是不同的

我试过的 我认为重叠部分可以通过溢出删除：hidden；，但它不适用于对角线切割部分丢失的&：：before元素

中心布局问题 我希望以这种方式将选项卡中的字母居中对齐。

密码 html{字体大小：62.5%；} 正文{背景色：c6d2dd；} 标题{边距：0；填充：0；边框：0；轮廓：0；字体大小：100%；字体：继承；垂直对齐：基线；背景：透明；框大小：边框框；}/*重置*/ 标题ul{ 列表样式：无； 显示器：flex； 对齐项目：居中； 柔性包装：包装； 溢出：隐藏； 宽度：100%； 边缘底部：-1px； } 头李{ 字体大小：1.5rem； 身高：4.5雷姆； 左侧填充：.4rem； } 李：第一个孩子{ 左侧填充：1.5雷姆； } 李：最后一个孩子{ 填充权：.5rem； } 标题li>a{ 文字装饰：无； 显示：块； 填充：1rem2rem； 身高：100%； 颜色：fff； 大纲：无； 过渡：背景色0.2s缓和，边框色0.2s缓和； 位置：相对位置； 边界半径：9px 5px 0； } /*从这里*/ 标题li>a：将{/*悬停在右侧的矩形部分*/ 背景色：rgba255、255、255、0.4； 边框颜色：rgba255、255、255、0.4； 过渡：背景色0.3s缓进，边框色0.3s缓进； 盒影：2px2p2pRGBA0,0,0,0.4； } 标题li>a:hover:：在左侧斜切的{/*部分之前*/ 背景色：rgba255、255、255、0.4； 边框颜色：rgba255、255、255、0.4； 过渡：背景色0.3s缓进，边框色0.3s缓进； 盒影：-2px2p2pRGBA0,0,0,0.2； } 标题li>a：：在左侧斜切的{/*部分之前*/ 内容：； 位置：绝对位置； z指数：1； 排名：0； 左：-.4rem； 底部：0； 宽度：1em； 过渡：背景色0.3s，易于调整； 变换：倾斜-15度； 边界半径：5px0； } .current a{/*从此处添加*/ 边框：1px实心fff； 边框底宽：0； z指数：3； 背景色：9bacbb； 指针事件：无； 利润底部：-3px； } .当前a：：以前{ 边框：1px实心fff； 背景色：9bacbb； 保证金：-1px 0-3px-1px； z指数：3； 左：-.5雷姆； } 当前a：：之后{ 内容：； 位置：绝对位置； z指数：3； 排名：0； 左：-.4rem； 底部：0； 宽度：1em； 变换：倾斜-15度； 边界半径：5px0； 利润底部：-3px； 背景色：9bacbb； } .内容{ 显示器：flex； 保证金：0 1rem 1rem 1rem； 宽度：100vw； 身高：61.9雷姆； 位置：相对位置； 背景：9bacbb； 边框：1px实心fff； 边界半径：5px； 盒影：0-2px3px-2pxRGBA0,0,0.5； } 你好，世界

---

我会用一个元素来做不同的事情。诀窍是使倾斜并隐藏右侧溢出的部分：

检查对代码的注释

html{字体大小：62.5%；} 正文{背景色：c6d2dd；} 标题{边距：0；填充：0；边框：0；轮廓：0；字体大小：100%；字体：继承；垂直对齐：基线；背景：透明；框大小：边框框；}/*重置*/ 标题ul{ 列表样式：无； 显示器：flex； 对齐项目：居中； 柔性包装：包装； 溢出：隐藏； 宽度：100%； 边缘底部：-1px； } 头李{ 字体大小：1.5rem； 身高：4.5雷姆； 左侧填充：.4rem； } 李：第一个孩子{ 左侧填充：1.5雷姆； } 李：最后一个孩子{ 填充权：.5rem； } 标题li>a{ 文字装饰：无； 显示：块； 填充：1rem 1rem 1rem 3rem；/*更改了填充*/ 左边距：-2rem；/*创建重叠*/ 身高：100%； 颜色：fff； 大纲：无； 过渡：背景色0.2s缓和，边框色0.2s缓和； 位置：相对位置； 边界半径：9px 5px 0； 溢出：隐藏；/*隐藏溢出*/ /*增加z指数*/ 位置：相对位置； z指数：2； } /*从这里*/ 标题li>a：将{/*悬停在右侧的矩形部分*/ 过渡：背景色0.3s缓进，边框色0.3s缓进； 盒影：2px2p2pRGBA0,0,0,0.4； /*从这里删除边框和背景*/ } 标题li>a:hover:：在左侧斜切的{/*部分之前*/ 背景色：rgba255、255、255、0.4； 边框颜色：rgba255、255、255、0.4； 过渡：背景色0.3s缓进，边框色0.3s缓进； 盒影：-2px2p2pRGBA0,0,0,0.2； } 标题li>a：：在左侧斜切的{/*部分之前*/ 内容：； 位置：绝对位置； z指数：-1； 排名：0； 左：0； 底部：0； 右转：0；/*右转：0*/ 过渡：背景色0.3s，易于调整； 变换：倾斜-15度； 变换原点：右下角/*改变原点*/ 边界半径：5px0； } .当前a{ 指针事件：无； 利润底部：-3px； 右边框：1px实心fff； } .当前a：：以前{ 边框：1px实心fff； 背景色：9bacbb； } .内容{ 显示器：flex； 保证金：0 1rem 1rem 1rem； 宽度：100vw； 身高：61.9雷姆； 位置：相对位置； 背景：9bacbb； 边框：1px实心fff； 边界半径：5px； 盒影：0-2px3px-2pxRGBA0,0,0.5； } 你好，世界

---

我会用一个元素来做不同的事情。诀窍是使倾斜并隐藏右侧溢出的部分：

检查对代码的注释

html{字体大小：62.5%；} 正文{背景色：c6d2dd；} 标题{边距：0；填充：0；边框：0；轮廓：0；字体大小：100%；字体：继承；垂直对齐：基线；背景：透明；框大小：边框框；}/*重置*/ 标题ul{ 列表样式：无； 显示器：flex； 对齐项目：居中； 柔性包装：包装； 溢出：隐藏； 宽度：100%； 边缘底部：-1px； } 头李{ 字体大小：1.5rem； 身高：4.5雷姆； 左侧填充：.4rem； } 李：第一个孩子{ 左侧填充：1.5雷姆； } 李：最后一个孩子{ 填充权：.5rem； } 标题li>a{ 文字装饰：无； 显示：块； 填充：1rem 1rem 1rem 3rem；/*更改了填充*/ 左边距：-2rem；/*创建重叠*/ 身高：100%； 颜色：fff； 大纲：无； 过渡：背景色0.2s缓和，边框色0.2s缓和； 位置：相对位置； 边界半径：9px 5px 0； 溢出：隐藏；/*隐藏溢出*/ /*增加z指数*/ 位置：相对位置； z指数：2； } /*从这里*/ 标题li>a：将{/*悬停在右侧的矩形部分*/ 过渡：背景色0.3s缓进，边框色0.3s缓进； 盒影：2px2p2pRGBA0,0,0,0.4； /*从这里删除边框和背景*/ } 标题li>a:hover:：在左侧斜切的{/*部分之前*/ 背景色：rgba255、255、255、0.4； 边框颜色：rgba255、255、255、0.4； 过渡：背景色0.3s缓进，边框色0.3s缓进； 盒影：-2px2p2pRGBA0,0,0,0.2； } 标题li>a：：在左侧斜切的{/*部分之前*/ 内容：； 位置：绝对位置； z指数：-1； 排名：0； 左：0； 底部：0； 右转：0；/*右转：0*/ 过渡：背景色0.3s，易于调整； 变换：倾斜-15度； 变换原点：右下；/*更改原点*/ 边界半径：5px0； } .当前a{ 指针事件：无； 利润底部：-3px； 右边框：1px实心fff； } .当前a：：以前{ 边框：1px实心fff； 背景色：9bacbb； } .内容{ 显示器：flex； 保证金：0 1rem 1rem 1rem； 宽度：100vw； 身高：61.9雷姆； 位置：相对位置； 背景：9bacbb； 边框：1px实心fff； 边界半径：5px； 盒影：0-2px3px-2pxRGBA0,0,0.5； } 你好，世界

---

非常感谢你！！非常令人印象深刻我想让字母居中&我想让标签彼此稍微重叠。我试着根据你的答案做一些调整，但做得不好。。当前角色消失了，即使我自己调整了它。我真希望我写的是电流的影响。。很抱歉，我添加了有关“当前”选项卡的所有元素&以防万一content@POP你能在这里分享更新的代码吗：。。如果我看到代码，我会更好地帮助你！我在问题中添加了代码，但我写了完全相同的东西。非常感谢！但是，仍然存在中心对齐问题：'我用后记中的图片解释了这一点，我想做这个..@pop play，用填充物填充。Fiind this line padding:1rem 1rem 1rem 3rem；并调整左/右值，直到得到所需的值。也许这个填充物：1rem2rem1rem3rem；非常感谢你！！非常令人印象深刻我想让字母居中&我想让标签彼此稍微重叠。我试着根据你的答案做一些调整，但做得不好。。当前角色消失了，即使我自己调整了它。我真希望我写的是电流的影响。。很抱歉，我添加了有关“当前”选项卡的所有元素&以防万一content@POP你能在这里分享更新的代码吗：。。如果我看到代码，我会更好地帮助你！我在问题中添加了代码，但我写了完全相同的东西。非常感谢！但是，仍然存在中心对齐问题：'我用后记中的图片解释了这一点，我想做这个..@pop play，用填充物填充。Fiind this line padding:1rem 1rem 1rem 3rem；并调整左/右值，直到得到所需的值。也许这个填充物：1rem2rem1rem3rem；