Как сверстать такой шестиугольник плавный ?

[Alexej]

Нужно сверстать такой элемент. Сам не особо понимаю как такое делать. Знаю про то как шестиуголники делают но такими планому закругленными углами не знаю как.

 

[AlexZaw]

Можно так:

<div></div>

div{
  margin: 50px;
  height: 100px;
  width: 150px;
  background: #333;
  border-radius: 20px;
  position: relative;
}
div:after, div:before{
  content: '';
  display: block;
  position: absolute;
  height: 100px;
  width: 150px;
  border-radius: 20px;
  background: #333;
}
div:after{
  transform: rotate(60deg);
}
div:before{
  transform: rotate(-60deg);
}

 

[Alexej]

5 часов назад, AlexZaw сказал:

Можно так:

<div></div>

div{
  margin: 50px;
  height: 100px;
  width: 150px;
  background: #333;
  border-radius: 20px;
  position: relative;
}
div:after, div:before{
  content: '';
  display: block;
  position: absolute;
  height: 100px;
  width: 150px;
  border-radius: 20px;
  background: #333;
}
div:after{
  transform: rotate(60deg);
}
div:before{
  transform: rotate(-60deg);
}

 

Отлично! Только вот мне теперь на это место еще и фотку нужно закинуть, это возможно ?

Поддержка браузерами я так понимаю это IE8 и ниже не поддерживается ?

Edited July 4, 2018 by Alexej

[AlexZaw]

К сожалению нет, но вам поможет clip-path или mask http://htmlbook.ru/blog/maskirovanie-v-css

http://htmlbook.ru/blog/maskirovanie-v-css

 

[sigma77]

@Alexej

Если задний фон позволяет можно использовать контр-форму. Т.е. центральная часть прозрачная, остальное - по цвету фона.

Ну или использоваять маски svg, если нужно кроссбраузерность и фон не однотонный. Но это то еще удовольствие. Особенно в IE )

[Alexej]

3 часа назад, sigma77 сказал:

@Alexej

Если задний фон позволяет можно использовать контр-форму. Т.е. центральная часть прозрачная, остальное - по цвету фона.

Ну или использоваять маски svg, если нужно кроссбраузерность и фон не однотонный. Но это то еще удовольствие. Особенно в IE )

Я через пседоэлемент прозрачную картинку наложил на фото только вот картинка не совсем плавная.   

7 часов назад, AlexZaw сказал:

К сожалению нет, но вам поможет clip-path или mask http://htmlbook.ru/blog/maskirovanie-v-css

http://htmlbook.ru/blog/maskirovanie-v-css

 

Спасибо прочту.