« Адаптивная Цитата (Quote) в форме круга с использованием CSS и HTML »

<div class="ufive-quote">
  <blockquote class="ufive-text">
  <p>
  У нас вы можете найти к себе на сайт, такие материалы как - Шаблоны, Скрипты, Информеры и многое другое, для сайтов на бесплатном конструкторе uCoz.
  </p>
  <span>- uFive.Ru -</span>
  </blockquote>
</div>

/* Адаптивная Цитата (Quote) в форме круга с использованием CSS и HTML */
@import url("https://fonts.googleapis.com/css2?family=Exo+2&display=swap");

.ufive-quote {
  width: 350px;
  height: 350px;
  position: relative;
  margin: 0 auto;
  font-family: "Exo 2", sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

.ufive-text {
  width: 100%;
  height: 100%;
  background: radial-gradient( ellipse at center,  
  rgb(255, 174, 52) 0%,
  rgb(255, 192, 97) 70%,
  rgba(0, 128, 172, 0) 70.3% );
  position: relative;
  margin: 0;
  color: #fff;
}

.ufive-text p {
  height: 100%;
  font-size: 22.5px;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  font-style: italic;
  text-shadow: 0.5px 0.5px 1px #393939;
}

.ufive-text::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  shape-outside: polygon(
  0 0,
  98% 0,
  50% 6%,
  23.4% 17.3%,
  6% 32.6%,
  0 50%,
  6% 65.6%,
  23.4% 82.7%,
  50% 94%,
  98% 100%,
  0 100%
  );
  shape-margin: 7%;
}

.ufive-text p::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  shape-outside: polygon(
  2% 0%,
  100% 0%,
  100% 100%,
  2% 100%,
  50% 94%,
  76.6% 82.7%,
  94% 65.6%,
  100% 50%,
  94% 32.6%,
  76.6% 17.3%,
  50% 6%
  );
  shape-margin: 7%;
}

.ufive-quote blockquote span {
  width: 100%;
  position: absolute;
  bottom: 26px;
  font-size: 22px;
  text-align: center;
  font-style: italic;
  text-shadow: 0.5px 0.5px 1px #393939;
}

.ufive-quote::before {
  content: "\201C";
  font-size: 330px;
  line-height: 0.78;
  position: absolute;
  top: -18px;
  left: 0;
  z-index: 1;
  font-family: sans-serif, serif;
  color: #393939;
  opacity: 0.9;
}

@media (max-width: 850px) {
.ufive-quote {
  width: 300px;
  height: 300px;
}

.ufive-quote::before {
  font-size: 280px;
  top: -10px;
}

.ufive-text p {
  font-size: 18.9px;
}

.ufive-quote blockquote span {
  bottom: 30px;
  font-size: 18px;
}
}

@media (max-width: 350px) {
.ufive-quote {
  width: 250px;
  height: 250px;
}

.ufive-quote::before {
  font-size: 230px;
  top: -10px;
}

.ufive-text p {
  font-size: 15.7px;
}

.ufive-quote blockquote span {
  bottom: 25px;
  font-size: 15px;
}
}
/* uFive.Ru */