Как сверстать такой блок

[garmoni]

Возникла проблема с версткой такого блока как на картинке. Подскажите в каком направлении искать информацию?

 

[AlexZaw]

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

*{
box-sizing: border-box;}
.box{
  width: 300px;
  height: 300px;
  border: 1px solid grey;
  position: relative;
  margin-top: 100px;
    background-color: #fff;
  
}
.inner{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.inner:before{
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  border-radius:50%;
  box-shadow: 0 0 0 11px grey;   
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -50px;

}
.circle{
  width: 100px;
  height: 100px;
  border: 1px solid grey;
  border-radius:50%;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -50px;
  background-color: #fff;
  box-shadow: 0 0 0 10px #fff
}

тени добавить труда не составит я думаю

[garmoni]

Спасибо

[garmoni]

тень получилось сделать. как при наведении мышки сделать тень не только на inner но и на inner:before? и чтобы они одновременно реагировали на наведение. а не отдельно

Edited November 19, 2017 by garmoni

[AlexZaw]

покажите что у вас получилось, оттуда будем плясать дальше

[garmoni]

https://fiddle.jshell.net/pkj6ey4t/1/

[AlexZaw]

Маленько переделал.

Так? 

https://jsfiddle.net/AlexZaw/mx8qjut6/

[garmoni]

какая часть изменилась? а то я много уже успела поменять

[AlexZaw]

Так я ваш пример переделал, а именно размеры и поведение inner:before

[garmoni]

11 минуту назад, AlexZaw сказал:

Так я ваш пример переделал, а именно размеры и поведение inner:before

я уже успела поменять то что делала

вроди правильно работает но у меня правая часть круга не дорисовывается

http://garmoni.inf.ua/paprika/#sport-bar

[AlexZaw]

у вас в стилях указано

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

отключите это правило или увеличьте размеры inner:before и подправьте ему маржины чтобы он был по центру

[garmoni]

16 минут назад, AlexZaw сказал:

у вас в стилях указано

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

отключите это правило или увеличьте размеры inner:before и подправьте ему маржины чтобы он был по центру

Спасибо. Все получилось. И еще вопрос

При наведении, у inner вместе с тенью появляется бордер на 2 пикселя. Как его уменьшить?

 

[AlexZaw]

29 минут назад, garmoni сказал:

При наведении, у inner вместе с тенью появляется бордер на 2 пикселя. Как его уменьшить?

Это же вроде у .box указан бордер, просто он заметнее становится когда появляется тень. Или вы про что то другое?

[garmoni]

8 минут назад, AlexZaw сказал:

Это же вроде у .box указан бордер, просто он заметнее становится когда появляется тень. Или вы про что то другое?

Да, в box. Как сделать, чтобы при наведении бордер темнее не становился?

[AlexZaw]

Это конечно просто оптический обман, но поправить можно вот так:

.box:hover {
    border: 2px solid rgba(234,234,234,.2);
}

 

[garmoni]

Спасибо еще раз

[garmoni]

вопрос по форме.

почему в разных браузерах позиция кнопки-стрелки в разных местах
https://jsfiddle.net/n7va4u34/

Edited November 20, 2017 by garmoni

[garmoni]

Изменила в мозиле путем
@-moz-document url-prefix() {
    .mail-but button
{
      top: -42px;
}}