React项目CSS内侧圆角问题：如何让背景透过圆角区域显示？

我用ReactJS开发博客Web应用，专注样式开发时遇到问题：带背景色的div中，无法让页面背景透过创建的内侧圆角区域显示。尝试用两个方块实现箭头旁的曲线效果：深青色的square1作为彩色曲线，深色的square2作为圆角遮罩，但square2当前可见，希望隐藏它，让square1呈现单纯曲线，页面背景透过该区域显示。

界面与问题截图 #

现有代码 #

Filter组件代码 #

import React, { useState } from 'react';
import './css/Filter.css';

function Filter() {
  const [isActive, setIsActive] = useState(true);

  const handleFilterArrowButtonClick = () => {
    setIsActive((prevState) => !prevState);
  };

  const getArrowClassName = () => {
    return isActive ? 'isActive' : 'isInactive';
  };

  return (
    <div className='filter'>
      <div className={`filter-container ${getArrowClassName()}`}>
        ...
      </div>
      <div className='arrow-container' onClick={handleFilterArrowButtonClick}>
        <div className='square square-left'></div>
        <div className='arrow-rectangle'>
          <div className='arrow-triangle'></div>
        </div>
        <div className='square square-right'></div>
      </div>
    </div>
  );
}

export default Filter;

Filter的CSS代码 #

.filter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filter-container {
  background-color: darkcyan;
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
  overflow: hidden; /* 折叠时隐藏内容 */
}

.isActive {
  width: 100%;
  max-height: 200px;
  border-radius: 0 0 20px 20px;
}

.isInactive {
  width: 0;
  height: 0;
  border-radius: 0;
}

.arrow-container {
  display: flex;
  justify-content: center;
  margin-top: auto; 
}

.square {
  width: 15px;
  height: 15px;
  background-color: darkcyan;
  position: relative;
}

.square::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #1a2130;
}

.square-left::before {
  border-radius: 0 65% 0 0;
}

.square-right::before {
  border-radius: 65% 0 0 0;
  top: 0;
  right: 0;
}

.arrow-rectangle {
  width: 30px;
  height: 18px;
  border-radius: 0 0 10px 10px;
  background-color: darkcyan;
  position: relative;
}

.arrow-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid aliceblue;
  position: absolute;
  bottom: 2px; /* 调整位置到矩形内部 */
  left: 50%;
  transform: translateX(-50%);
}

App组件代码 #

import './App.css';
import Footer from './components/Footer';
import Home from './components/Home';
import Navbar from './components/Navbar';
import Filter from './components/Filter';

export default function App() {
  return (
    <div className='App'>
      <Navbar />
      <Filter />
      <div className='content'>
        <Home />
      </div>
      <Footer />
    </div>
  );
}

示例代码片段 #

CSS

body {
  background-color: grey;
}

.filter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arrow-container {
  display: flex;
  justify-content: center;
  margin-top: auto; 
}

.square {
  width: 15px;
  height: 15px;
  background-color: darkcyan;
  position: relative;
}

.square::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #1a2130;
}

.square-left::before {
  border-radius: 0 65% 0 0;
}

.square-right::before {
  border-radius: 65% 0 0 0;
  top: 0;
  right: 0;
}

.arrow-rectangle {
  width: 30px;
  height: 18px;
  border-radius: 0 0 10px 10px;
  background-color: darkcyan;
  position: relative;
}

.arrow-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid aliceblue;
  position: absolute;
  bottom: 2px; /* 调整位置到矩形内部 */
  left: 50%;
  transform: translateX(-50%);
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Filter Component</title>
</head>
<body>
  <div class='filter'>
    <div class='arrow-container'>
      <div class='square square-left'></div>
      <div class='arrow-rectangle'>
        <div class='arrow-triangle'></div>
      </div>
      <div class='square square-right'></div>
    </div>
  </div>
</body>
</html>

解决方案 #

核心是移除深色伪元素，通过CSS裁剪或遮罩实现square内侧圆角透明，直接透出页面背景，以下两种方案任选：

方案1：用clip-path实现精准裁剪 #

1. 删除所有.square::before相关CSS代码
2. 修改.square的样式：

.square {
  width: 15px;
  height: 15px;
  background-color: darkcyan;
  position: relative;
}

.square-left {
  /* 裁剪出右上角圆角透明区域，数值可根据需求调整 */
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.square-right {
  /* 裁剪出左上角圆角透明区域 */
  clip-path: polygon(0 0, 25% 0, 100% 25%, 100% 100%, 0 100%);
}

方案2：用mask-image实现平滑圆角 #

1. 删除所有.square::before相关CSS代码
2. 修改.square的样式：

.square {
  width: 15px;
  height: 15px;
  background-color: darkcyan;
  position: relative;
}

.square-left {
  /* 右上角径向渐变遮罩，15px为圆角半径，可调整 */
  mask-image: radial-gradient(circle at top right, transparent 15px, black 15px);
  -webkit-mask-image: radial-gradient(circle at top right, transparent 15px, black 15px);
}

.square-right {
  /* 左上角径向渐变遮罩 */
  mask-image: radial-gradient(circle at top left, transparent 15px, black 15px);
  -webkit-mask-image: radial-gradient(circle at top left, transparent 15px, black 15px);
}

两种方案都能让square的内侧圆角区域透明，透出页面背景，无需再用深色伪元素遮挡。

内容的提问来源于stack exchange，提问作者Alonso