Шестигранник с закругленными углами - максимально просто

#html #css #svg

Какой лучший способ для создания изображения шестигранника с тенью?


  https://codepen.io/Zentro/project/editor/AaoveW/


- версия с svg-фильтром.


Я пробовал вставить картинку - тогда нельзя применить тень.
Сделал с помощью css/html(трансформированные дивы - 3 шт) - нельзя закруглить углы.
Сделал с помощью svg-filter, но и тут беда - в хроме иногда пропадают картинки.


Подскажите как это сделать правильно и максимально просто?
    

Ответы

Ответ 1

SVG решение

  


Шестиугольник выступает в роли маски.
Маска задана в секции 
Далее она накладывается на изображение, что остается за границами
маски обрезается.
Ширина границы маски-шестиугольника задается атрибутом -
stroke-width:3;  
Решение универсально - вы можете заменять в строке  

    
 	
	 	 
    
    
     
   
      
 
 	
	





Шестигранник с закругленными уголками  

Изменён только патч.   






Ответ 2

Вариант на чистом CSS

Эх, столько усилий и все зря. Не могу в шестигранник вставить контент, хотя бы фоновую
картинку что ли. Может кто допилит, обидно удалять. Но что-то мне кажется что это совсем
уже не просто... (



* {
  padding: 0;
  margin: 0;
}

:root {
  /* height of hexagon */
  --hexagon-height: 150px;
  /* size of border */
  --hexagon-bordersize: 5px;
  /* size of border-radius */
  --hexagon-borderradius: 16px;
  /* width = height * sqrt(3) - 30% value of border-radius size */
  --hexagon-width: calc(var(--hexagon-height) * 1.7320508 - var(--hexagon-borderradius)*.3);
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.wrapper {
  width: var(--hexagon-width);
  height: calc(2*var(--hexagon-height));
  margin: auto;
  position: relative;
}

.hexagon,
.hexagon::after,
.hexagon::before {
  border: var(--hexagon-bordersize) solid;
  box-sizing: border-box;
  width: var(--hexagon-width);
  height: var(--hexagon-height);
  position: absolute;
  top: calc(.5*var(--hexagon-height));
  border-radius: var(--hexagon-borderradius);
  border-top: none;
  border-bottom: none;
}

.hexagon::after,
.hexagon::before {
  display: block;
  content: '';
  position: absolute;
  left: calc(-1*var(--hexagon-bordersize));
  top: calc(-1*var(--hexagon-bordersize));
  height: calc(100% + 2*var(--hexagon-bordersize));
  /* + dubble size of border*/
}

.hexagon::after {
  transform: rotate(60deg);
}

.hexagon::before {
  transform: rotate(120deg);
}

.shadow,
.shadow::after,
.shadow::before {
  background-color: black;
}

.shadow {
  transform: translate(10px, 10px);
  filter: blur(5px);
  opacity: .2;
  z-index: -100;
}

  

  




Ответ 3

Анимация шестиугольника

Несколько видов  анимаций при наведении курсора на фигуру: 

Анимация бордюра шестиугольника  с использованием атрибута stroke-dashoffset: 

  


Анимация увеличения прозрачности: 

 


Возврат в исходное состояние:   

    









Вращение  шестиугольника    






   

Вращение и одновременное увеличение шестиугольника    






Ответ 4

Предлагаю в качестве тени использовать второй path и сдвинуть его вправо и вниз относительно
картинки с помощью команды: translate(5 2.5)
Цвет тени устанавливается либо здесь :  

.boxShadow {
     fill:#2A2A41;         


Либо изменением атрибутов SVG градиента:    


             
            

           


Ниже пример




   
 


	





Второй вариант   

Для формирования тени, придающей фигуре 3D эффект используется заполнение (fiil)
и строка : 

.boxShadow {
    stroke-width:2;
    stroke:grey;
   fill:#00174D;
}   





   
 


	





Все примеры адаптивны. Чтобы регулировать начальный размер шестиугольника необходимо
указать ширину и высоту контейнера SVG в процентах: 

.container{width:30%; height:30%;}