Помогите нарисовать это в css и html (без фиолетового фона)

Question

Круг любого цвета можно сделать

картинка

Answer 1

почитайте например вот это - тык

в html:

<div class="circle"></div>

в css:

.circle {
width: 100px; 
height: 100px;
background: #83A7C9;
border-radius: 50%;
}

Answer 2

"Снять" картинку в CSS - не такая большая проблема. Гораздо труднее потом это масштабировать. Разберитесь и подгоните под нужные Вам размеры:

body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #fff; background-image: url("https://i.stack.imgur.com/m9NKc.png"); background-position: center; background-repeat: no-repeat; background-size: auto; }

.round {
  position: relative;
  height: 460px; width: 460px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #45a3af;
}
.round>div {
  position: absolute;
  top: 50%;
}

.shadow {
  right: 50%;
  height: 331px; width: 365px;
  transform: translate(81%, -37px) rotate(45deg) skew(13deg);
  background-color: rgb(0 0 0 / 0.3);
}

.wall {
  left: 50%;
  height: 145px; width: 210px;
  transform: translate(-50%, 0px);
  background-color: #fec9b5;
}

.door {
  left: 39%;
  height: 113px; width: 65px;
  transform: translate(-50%, 32px);
  background-color: #fd8650;
  box-shadow: inset 6px 6px 2px 0px #fef7f7, inset -6px 0px 2px 0px #fef7f7, 10px 4px 6px -7px #fe8651;
}

.window {
  right: 39%;
  height: 75px; width: 65px;
  transform: translate(45%, 32px);
  background-image: linear-gradient( 140deg, #58eef3 46%, #fff 49%, #fff 57%, #58eef3 60%);
  box-shadow: inset 0px 0px 2px 6px #fef7f7, inset 7px 7px 7px 0px rgb(0 0 0 / 0.3), 10px 4px 6px -7px #fe8651, 4px 4px 6px 0px #fe8651;
}

.roof-ridge {
  left: 50%;
  height: 26px; width: 170px;
  transform: translate(-50%, -145px);
  background-color: #e45571;
  border-radius: 13px 13px 0 0;
  box-shadow: inset 0 0 1px 4px #a7294c;
}

.roof-slope {
  left: 50%;
  height: 43px; width: 250px;
  transform: translate(-50%, -50px);
  background-image: repeating-linear-gradient( 90deg, #a7294c, #a7294c 5px, #fff 6px, #fff 34px, #a7294c 35px, #a7294c 41px, #e12d4f 41px, #e12d4f 70px);
}
.roof-slope::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  height: 73px; width: 250px;
  transform: translate(-50%, -101px) perspective(100px) rotateX(28deg) scale(0.81, 1.1);
  background-image: repeating-linear-gradient( 90deg, #a7294c, #a7294c 5px, #fff 6px, #fff 34px, #a7294c 35px, #a7294c 41px, #e12d4f 41px, #e12d4f 70px);
}
.roof-slope::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  height: 19px; width: 250px;
  transform: translate(-50%, 21px);
  background-image: radial-gradient( circle closest-side at 230px -2px, #fff, #fff 14px, #a7294c 15px, #a7294c 19px, transparent 20px), radial-gradient( circle closest-side at 195px -2px, #e12d4f, #e12d4f 14px, #a7294c 15px, #a7294c 19px, transparent 20px), radial-gradient( circle closest-side at 160px -2px, #fff, #fff 14px, #a7294c 15px, #a7294c 19px, transparent 20px), radial-gradient( circle closest-side at 125px -2px, #e12d4f, #e12d4f 14px, #a7294c 15px, #a7294c 19px, transparent 20px), radial-gradient( circle closest-side at 90px -2px, #fff, #fff 14px, #a7294c 15px, #a7294c 19px, transparent 20px), radial-gradient( circle closest-side at 55px -2px, #e12d4f, #e12d4f 14px, #a7294c 15px, #a7294c 19px, transparent 20px), radial-gradient( circle closest-side at 20px -2px, #fff, #fff 14px, #a7294c 15px, #a7294c 19px, transparent 20px);
}

<div class="round">
  <div class="shadow"></div>
  <div class="wall"></div>
  <div class="door"></div>
  <div class="window"></div>
  <div class="roof-slope"></div>
  <div class="roof-ridge"></div>
</div>

БЛОГ НА HUSL

Помогите нарисовать это в css и html (без фиолетового фона)

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