I am currently developing a web app for blogs using ReactJS. I am currently focusing on styling, and I am encountering an issue with making my background visible inside a div that has a colored background. I have been looking on internet, MDN Web Docs, GeeksForGeeks, and using chatGPT, but nothing, I can’t find the solution.

This is my interface :

This is my issue :

As you can see, I’m attempting to create a curved shape next to the arrow using two squares: square1, which is dark cyan in the image, corresponds to the colorful curve; and square2, which is dark, corresponds to the square with rounded corners.

However, you may notice that square2 is present, but I don’t want it to be visible to the user. I want square1 to appear as a simple curve, allowing the background to be visible outside of it

Code

The squares and arrow are in Filter component :

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()}`}>
        {isActive && (
          <form className='filter-form'>
            <div className='filter-form-container'>
              <input
                type='text'
                id='minLike'
                name='minLike'
                placeholder='Min'
              />
              <img src='/up-thumb.png' alt='up' className='up' />
              <input
                type='text'
                id='maxLike'
                name='maxLike'
                placeholder='Max'
              />
            </div>
            <div className='filter-form-container'>
              <input
                type='text'
                id='minUnlike'
                name='minUnlike'
                placeholder='Min'
              />
              <img src='/down-thumb.png' alt='down' className='down' />
              <input
                type='text'
                id='maxUnlike'
                name='maxUnlike'
                placeholder='Max'
              />
            </div>
            <div className='filter-form-container'>
              <input
                type='text'
                id='minComments'
                name='minComments'
                placeholder='Min'
              />
              <img src='/comment.png' alt='comments' className='comment' />
              <input
                type='text'
                id='maxComments'
                name='maxComments'
                placeholder='Max'
              />
            </div>
            <button type='submit'>Submit</button>
          </form>
        )}
      </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;

Its css file :

.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; /* To hide the content when collapsed */
}

.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; /* Adjust to position inside the rectangle */
  left: 50%;
  transform: translateX(-50%);
}

.filter-form {
  padding: 10px;
}

.filter-form-container {
  display: flex;
  align-items: center;
}

.filter-form input {
  padding: 5px;
  margin: 5px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.filter-form button {
  padding: 5px;
  background-color: #1a2130;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.filter-form button:hover {
  background-color: #333;
}

The App component where is called Filter component :

import './App.css';
import Blogs from './components/Blogs';
import Blog from './components/Blog';
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>
  );
}

I’m sorry for any incovenience about this topic, if there is any information missing, don’t hesitate. Thank you in advance for your help.