Как сверстать треугольную иконку, которая поворачивается при наведении?

Question

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

Как это сделать, может быть с помощью трансформ или псевдоэлементами?

Answer 1

svg {
  width: 100%;
  max-height: calc(100vh - 16px);
  display: block;
  margin: auto;
  color: blue;
  /* pointer-events: none; */
}

path {
  fill: currentColor;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1;
  /* pointer-events: fill; */
}

svg:hover {
  transform: rotate(180deg);
}

<svg viewBox="-5 0 10 6">
  <path d="M-4,1L4,1L0,5Z" />
</svg>

Answer 2

Если макет дан вам дизайнером, а они как правило требуют выполнять свои фантазии на 100%, то можно воспользоваться svg для pixel Perfect и его паттернами для получения сетки.

Обратите внимание, что нижний угол несколько больше других. Поэтому нужно загрузить картинку макета в векторный редактор и нанести узловые точки по контуру. Далее в сохраненном SVG добавить SVG паттерн и стили css для :hover.

#path{
     transform-origin:center;
     transform-box:fill-box;
        }
    #path:hover {
     transform:rotate(180deg); 
    }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30%" height="30%"   viewBox="0 0 628 417">
  
  <defs>
    <pattern id="patt"
       x="10" y="0" width="120" height="120"
             patternUnits="userSpaceOnUse" >
        <rect fill="#012638" x="0" y="0" width="120" height="120" stroke="#74AAC7" />    
    </pattern>
  </defs>
  <path id="path" fill="url(#patt)"   d="M8 39c1 14 12 25 20 37 73 94 146 187 223 279 16 19 32 47 56 48 27 1 48-27 65-48 77-95 149-184 222-277 9-12 22-24 22-39-1-11-8-25-22-25L27 15C18 16 7 28 8 39Z"  stroke="#012638" stroke-width="2" />
</svg>

В качестве тренировки можно добавить вложенный паттерн, состоящий из более мелких прямоугольников:

#path{
     transform-origin:center;
     transform-box:fill-box;
     transform:rotate(0deg);
    /* transition:all 0.4s linear;*/
    }
    #path:hover {
     transform:rotate(180deg); 
    }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%"   viewBox="0 0 628 417">
  
  <defs> 
          <!-- Основной паттерн, крупные прямоугольники -->
    <pattern id="patt"
       x="10" y="0" width="120" height="120"
             patternUnits="userSpaceOnUse" >
        <rect  x="0" y="0" width="120" height="120" stroke="#74AAC7" fill="url(#p24)" />     
    </pattern> 
              <!-- Вложенный паттерн, мелкие прямоугольники -->
    <pattern id="p24" width="24" height="24" patternUnits="userSpaceOnUse">
        <path d="M24,0 L0,0 0,24 24,24z" fill="#012638" stroke="#74AAC7" stroke-width="1" />
      </pattern>
  </defs>
  <path id="path" fill="url(#patt)"   d="M8 39c1 14 12 25 20 37 73 94 146 187 223 279 16 19 32 47 56 48 27 1 48-27 65-48 77-95 149-184 222-277 9-12 22-24 22-39-1-11-8-25-22-25L27 15C18 16 7 28 8 39Z"  stroke="#012638" stroke-width="2"  />
</svg>

Добавить svg в HTML можно несколькими способами

Но, так как есть некоторая интерактивность :hover, то лучше добавить svg инлайн (копирование в HTML) или с помощью <object> При таком способе файл копируется на сервер и вызывается

Ниже два примера, при object способе :hover на иконке работает, при <img> нет

<p style="font-size:24px;"> Добавлено img </p>
 <img src="https://svg-art.ru/files/triangle-hover.svg" style="width:200px;height:200px" />
 
 <p style="font-size:24px;"> Добавлено object </p>
 <div id="container">
  <object type="image/svg+xml" data="https://svg-art.ru/files/triangle-hover.svg" width="200" height="200"> </object>
  </div>

БЛОГ НА HUSL

Как сверстать треугольную иконку, которая поворачивается при наведении?

Ответы (2 шт):