Doubt with CSS (Doubt about css)

Question

Hello!

How can I build this background in a section using css? I’m a novice and started a personal project, but I can’t build that background with pure CSS. Is it possible to do this? I searched some sites, but they didn’t solve my question.

Hello!

How can I build this background in a Section using css? I’m a Newbie and Started a personal project, but I can’t build this background with Pure css. Was it possible to do it? I searched some sites, but they didn’t Solve my Doubt. i used a div with className={Style.background} and Applied a pseudo-element.:

.background {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #031f73;
  display: flex;
}

 .background::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 31.25rem;
  background: #fff;
  clip-path: polygon(100% 0, 10% 100%, 100% 100%);
}

Answer 1

Cara doesn’t need pseudo-element, diagonal cut need not clip-path, to solve the two situations you can use two linear-gradiente diagonally, one to make the blue and one to make the line.

html,
body {
  padding: 0;
  margin: 0;
}
.background {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: 
    linear-gradient(60deg, transparent 50%, #fff 50%, #fff calc(50% + 4px), transparent calc(50% + 4px), transparent),
    linear-gradient(to bottom right, navy 0%, navy 50%, transparent 50.1%);
  background-size: 110% 110%;
}

<div class="background"></div>