0

Нужно сделать такую иконку.

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

Реализовать пробую через clip-path Разметка

  <div class="about about-gray">
 <div class="column column-gray">
 <div class="img__circle">
  <img src="images/contacts/01.svg" alt="">
</div>

Стили

 .about {
display: flex;
flax-direction : row;
justify-content: space-between;

}
.column{
display: flex;
flex-direction: column;
background-color: #ffffff;
flex : 0 1 33.333%;
justify-content: сenter;
max-height: 100vh;
min-width: 33.333%;
}

.img__circle {
 background-color:  rgba(35, 45,80, 1);
 clip-path: circle(100px at center);
 display: flex;
 justify-content: center;
 }
 .img__circle img {
  width: 30%;
  height: 30%;
  display: block;
  z-index: 10;
  }

Вот что получилось

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

Как "поднять иконку над дивом"? z-index не помог. Если прописать иконке

 position : absolute;
 teft: 50%;
 top : 50%;

а div .img__circleposition : reletive; то блок с иконкой отображается точно так же.

2
  • а почему не используете иконочные шрифты ? это удобнее и проще чем захломлять html не нужным 26 июн 2020 в 9:29
  • вот на пример : codepen.io/topicstarter/pen/abdyzra 26 июн 2020 в 9:33

2 ответа 2

2

.img__circle {
  background-color: rgba(35, 45, 80, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.img__circle img {
  width: 50px;
  height: 50px;
  display: block;
  z-index: 10;
  object-fit: cover;
}
<div class="about about-gray">
  <div class="column column-gray">
    <div class="img__circle">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/SVG_Logo.svg/512px-SVG_Logo.svg.png" alt="">
    </div>

2

.icon {
  width: 50px; height: 50px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon>svg {
  display: block;
  width: 24px; height: 24px;
}
<div class="icon">
  <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" tabindex="-1" title="Adjust" data-ga-event-category="material-icons" data-ga-event-action="click" data-ga-event-label="Adjust">
    <path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3-8c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z">
    </path>
  </svg>
</div>

Ваш ответ

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

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