Убрать тень при пересечении фигур

Question

Задал position: relative, для того, чтобы наложить изображения (ромбы) друг на друга, но появилась "тень". Как это решить? Ниже предоставлю скрин.

body {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  height: 3872px;
}

ul,
li {
  display: block;
}

.container {
  width: 1280px;
  margin: 0 auto;
}

.logo {
  margin-right: 15px;
  margin-left: 65px;
}

.text_logo {
  font-size: 25px;
  color: #6C63FF;
  font-weight: 600;
  margin-right: 52px;
}

.menu li a {
  text-decoration: none;
  color: black;
}

.menu {
  display: flex;
}

.menu li {
  margin-right: 40px;
}

.nav {
  display: flex;
  align-items: center;
  margin-top: 35px;
}

.sign_in {
  margin-right: 14px;
}

.sign_in a {
  text-align: center;
  text-decoration: none;
  color: black;
  border: 2px solid #B7B3B3;
  padding: 10px 24px 10px 24px;
}

.register a {
  text-decoration: none;
  color: white;
  background-color: #6C63FF;
  border: 2px solid #B7B3B3;
  padding: 10px 24px 10px 24px;
}

.section-one {
  margin-top: 112px;
}

.nav_section_one {
  margin-left: 65px;
}

.main-text-section-one {
  font-size: 44px;
  font-weight: 600;
  line-height: 54px;
}

.lorem-text-one-section p {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  opacity: 0.6;
}

.register-one-section {
  margin-top: 54px;
  width: 146px;
  height: 50px;
}

.register-one-section a {
  text-decoration: none;
  font-weight: 500;
  border: 2px solid #353434;
  padding: 15px 41px 15px 37px;
  color: white;
  background-color: #6C63FF;
}

.adaptive {
  display: flex;
}

.adaptive-two {
  display: flex;
}

.block-one-section-two {
  margin-left: 21.3%;
}

.section-two-img {
  width: 100%;
  text-align: center;
}

.learn-more-one-section {
  margin-top: 54px;
  margin-left: 20px;
  height: 50px;
}

.learn-more-one-section a {
  color: black;
  text-decoration: none;
  font-weight: 400;
  border: 2px solid #B7B3B3;
  padding: 15px 19px 15px 18px;
}

.section-two {
  margin-left: 65px;
  margin-top: 190px;
  text-align: center;
}

.section-two span {
  font-size: 44px;
  font-weight: 600;
}

.lorem-text-two-section {
  margin-top: -10px;
}

.lorem-text-two-section p {
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  opacity: 0.6;
}

.three-img {
  display: flex;
  justify-content: center;
  margin-top: 70px;
}

.three-img .ellipse-1,
.ellipse-2 {
  margin-right: 55px;
}

.main-text-ellipse {
  margin-top: 56px;
  font-size: 27px;
  font-weight: 700;
}

.subtext-ellipse p {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 600;
  line-height: 17px;
  margin-top: -15px;
}

.section-three {
  height: 580px;
  margin-top: 160px;
  background-color: #FFFCFC;
}

.main-block {}

.main-block {
  width: 50%;
  display: inline-block;
}

.main-block-2 {
  display: inline-block;
  width: 49%;
  position: absolute;
  margin-top: 136px;
}

.main-block-2 p {
  font-size: 40px;
  font-weight: 600;
  margin-left: 24.5%;
}

.main-block-2 .dash {
  margin-left: 24.5%;
  margin-top: -45px;
}

.ellipse-4 img {
  margin-top: -40px;
  position: absolute;
}

.img-people {
  margin-left: 65px;
  margin-top: 90px;
  position: absolute;
}

.subtext-dash p {
  font-size: 20px;
  font-weight: 400;
  opacity: 0.75;
}

.link-main-block-2 {
  margin-left: 24.5%;
}

.link-main-block-2 a {
  font-size: 22px;
  text-decoration: none;
  color: #6C63FF;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.main-text-section-four {
  /*text-align: center;*/
  /* либо сделать margin-left 50% */
}

.main-text-section-four h1 {
  font-size: 44px;
  font-weight: 600;
}

.adaptive-section-four {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
}

.logo_2 img {
  margin-left: 13px;
  margin-top: 30px;
}

.text_logo_2 {
  font-size: 25px;
  color: #6C63FF;
  font-weight: 600;
  margin-left: 14px;
  margin-top: 25px;
}

.line-section-4 {
  text-align: center;
  margin-top: -24px;
}

.block-main-image {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.romb-1 {
  position: relative;
  left: 6em;
  opacity: 0.5;
}

.romb-2 {
  position: relative;
  right: 6em;
  opacity: 0.5;
}


/* MEDIA */

@media screen and (max-width: 1362px) {
  .container {
    width: 1250px;
  }
}

@media screen and (max-width: 1331px) {
  .container {
    width: 1230px;
  }
}

@media screen and (max-width: 1312px) {
  .container {
    width: 1200px;
  }
  .menu li {
    margin-right: 30px;
  }
}

@media screen and (max-width: 1282px) {
  .container {
    width: 1150px;
  }
  .menu li {
    margin-right: 20px;
    font-size: 14px;
  }
  .sign_in a {
    font-size: 14px;
  }
  .register a {
    font-size: 14px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>SendPay</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;600;700&display=swap" rel="stylesheet">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
  </style>
</head>

<body>
  <header id="header" class="header">
    <div class="container">
      <div class="nav">
        <img src="img/logo.svg" alt="logo" class="logo">
        <span class="text_logo">Sendpay</span>

        <ul class="menu">
          <li><a href="#">send money</a></li>
          <li><a href="#">receive money</a></li>
          <li><a href="#" style="margin-right: 54px;">language</a></li>
          <li><a href="#">How it works</a></li>
        </ul>

        <div class="sign_in">
          <a href="#">Sign in</a>
        </div>

        <div class="register">
          <a href="#">Register</a>
        </div>
      </div>
    </div>
  </header>

  <section id="section-one" class="section-one">
    <div class="container">
      <div class="adaptive">
        <div class="block-one-section">
          <div class="nav_section_one" style="width: 420px;">
            <span class="main-text-section-one">
                                Sending Money is<br>Easier thn before
                            </span>

            <div class="dash">
              <img src="img/line.svg" alt="line">
            </div>

            <div class="lorem-text-one-section">
              <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit. Sed sed<br> consectetur libero. Curabitur.</p>
            </div>

            <div class="adaptive-two">
              <div class="register-one-section">
                <a href="#">Register</a>
              </div>

              <div class="learn-more-one-section">
                <a href="#">learn more</a>
              </div>
            </div>
          </div>
        </div>

        <div class="block-one-section-two">
          <img src="img/phone_and_people.svg" class="section-two-img" alt="photo phone and people">
        </div>
      </div>
    </div>
  </section>

  <section id="section-two" class="section-two">
    <div class="container">
      <span>
                    How it Works
                </span>

      <div class="dash">
        <img src="img/line.svg" alt="line">
      </div>

      <div class="lorem-text-two-section">
        <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec porttitor.</p>
      </div>

      <div class="three-img">
        <div class="ellipse-1">
          <img src="img/Ellipse_1.svg" alt="Ellipse 1">
          <div class="test1">
            <h3 class="main-text-ellipse">In-app transer</h3>
          </div>
          <div class="subtext-ellipse">
            <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec p</p>
          </div>
        </div>

        <div class="ellipse-2">
          <img src="img/Ellipse_2.svg" alt="Ellipse 2">
          <p class="main-text-ellipse">In-app transer</p>
          <div class="subtext-ellipse">
            <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec p</p>
          </div>
        </div>

        <div class="ellipse-3">
          <img src="img/Ellipse_3.svg" alt="Ellipse 3">
          <p class="main-text-ellipse">In-app transer</p>
          <div class="subtext-ellipse">
            <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec p</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="section-three" class="section-three">
    <div class="main-block">
      <div class="ellipse-4">
        <img src="img/Ellipse_4.svg" alt="">
      </div>

      <div>
        <img src="img/img-people.svg" alt="" class="img-people">
      </div>
    </div>

    <div class="main-block-2">
      <p>Real-time Currency<br> balance check</p>
      <div class="dash">
        <img src="img/big_line.svg" alt="line">
      </div>

      <div class="subtext-dash">
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit. Sed sed.</p>
      </div>

      <div class="link-main-block-2">
        <a href="#">Ream More ></a>
      </div>
    </div>
  </section>

  <section id="section-four" class="section-four">
    <div class="container">
      <div class="adaptive-section-four">
        <div class="main-text-section-four">
          <h1>We are giving Services</h1>
        </div>
        <div class="logo_2">
          <img src="img/logo_2.svg" alt="">
        </div>
        <span class="text_logo_2">Sendpay</span>
      </div>

      <div class="line-section-4">
        <img src="img/line.svg" class="line-section-4" alt="line">
      </div>

      <div class="block-main-image">
        <div><img src="img/romb-1.svg" class="romb-1"></div>

        <img src="img/romb-2.svg" alt="" class="romb-2">

      </div>
  </section>


  <footer id="footer" class="footer">
    <div class="container">

    </div>
  </footer>
</body>

</html>

Дизайн.

Answer 1

Используйте цвет без прозрачности.

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.quad {
  display: block;
  width: 40vw;
  height: 40vw;
  background: gray;
  transform: rotate(45deg);
}

<div class="quad"></div>
<div class="quad"></div>

Да и проще добавить этот элемент как картинку через фон. Имхо.

БЛОГ НА HUSL

Убрать тень при пересечении фигур

Ответы (1 шт):