1

введите сюда описание изображения

Подскажите, пожалуйста, не смог реализовать. Как закрасить угол с linear-gradient, чтобы было как в макете?

.circle {
  position: absolute;
  width: 306px;
  height: 306px;
  right: -33%;
  top: -39%;
  background: #EBF4FB;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.div-1 {
  height: 301px;
  background: #FFFFFF;
  box-shadow: 0px 5px 26px rgba(0, 0, 0, 0.08);
  padding: 48px 31px;
  margin: 31px;
}
<div class="container">
  <div class="row">
    <div class="col-xl-5 div-1">
      <div class="block circle"></div>
      <div class="col-xl"><img src="/img/tachometer.png" alt=""></div>
      <div class="col-xl text-div-1">Передать<br> показания счетчиков</div>
    </div>
  </div>
</div>

2 ответа 2

5

Такое можно изобразить относительно без костылей на одном лишь css - за счет radial-gradient

.container {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at 90% 0%, #ebf4fb, #ebf4fb 30%, #fff 30.1%);
    padding: 48px 31px;
    margin: 31px;
    box-shadow: 0px 5px 26px rgba(0, 0, 0, 0.08);
}
<div class="container"></div>

-1

Для div-1 пропишите position: relative; overflow: hidden; , а для блока circle right: -103px;

2
  • Получилось! Спасибо!
    – PHPcrud
    29 июл 2019 в 8:08
  • Одиночный минус бывает прилетает и просто так, это ещё не минусование.
    – A K
    29 июл 2019 в 12:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.