Цвет Блока, градиент

Question

HTML

    <body>
<div id="square"></div>
</body>

CSS

    body{
    background-color: black;
}
#square {
    width: 500px;
    height: 500px;
    background: rgb(43,177,196);
    background: linear-gradient(90deg, rgba(43,177,196,1) 50%, rgba(255,255,255,1) 50%);
    margin-left: auto;
    margin-right: 56px;
    margin-top: 250px;
    border-radius: 0 50% 0 50% ;
}

Как перекрасить фигуру как на картинке?

Answer 1

Вариант 1

#square {
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: 56px;
  margin-top: 250px;
  border-radius: 0 50% 0 50%;
  border: 1px solid #ccc;
  background: 
  linear-gradient(#8AE4FF, #8AE4FF) 0% 0% / 50% 50%, 
  linear-gradient(#FFEAFB, #FFEAFB) 100% 0% / 50% 50%, 
  linear-gradient(#8AE4FF, #8AE4FF) 100% 100% / 50% 50%, 
  linear-gradient(#FFEAFB, #FFEAFB) 0% 100% / 50% 50%;
  background-repeat: no-repeat;
}

<div id="square"></div>

Вариант 2

#square {
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: 56px;
  margin-top: 250px;
  border-radius: 0 50% 0 50%;
  border: 1px solid #ccc;
  position: relative;
  background-color: #FFEAFB;
}

#square::before,
#square::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #8AE4FF;
}

#square::before {
  top: 0;
  left: 0;
}

#square::after {
  bottom: 0;
  right: 0;
}

<div id="square"></div>

БЛОГ НА HUSL

Цвет Блока, градиент

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