Hexagon shaped card with HTML and CSS

Issue

I need to build a hexagon shaped card, using vuetify or just plain HTML and CSS shaped like this:

It´s not a duplicated question since the previous answers do not give the specific needs I need here

The previous given answers and those that are already available in stackoverflow do not highlight how to solve this: The content inside the hexagon should be contained and not leak or overflow. So for example I need a image to cover 70% of the top (and be clipped by the borders of the rounded hexagon) and in the bottom of the element I need a text and buttons.

So the main thing here is that the hexagon should be top flat, rounded corners and have custom children like an image that should be contained by the borders of the hexagon.

Solution

Actually, since no responses were usefull, I will post here a solution I found in case anyone in the future need something like:

This response was provided thanks to Felipe CSS 👏 he was able to use ilustrator and create a clip-path with rounded corners, a custom solution/hack.

codepen example,

many failed approachs, one worked

.hexagon {
  display: inline-block;
  width: 333px;
  height: 301px;
  background: #E9EEFD;
  -webkit-clip-path: polygon(98.66025% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%);
  position: relative;
  transition: transform 0.3s ease;
}

.hexagon:hover {
  transform: scale(1.1);
}

.hexagon img {
  width: 100%;
  height: 70%;
  object-fit: cover
}

.hexagon img:hover {
  cursor: pointer;
}

.hexagon .content {
  width: 65%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.hexagon .content>div {
  margin-bottom: 5px;
  /* Ajuste conforme necessário para a separação entre as divs de conteúdo */
}

.description {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="hexagon">
  <img src="https://assets.codepen.io/2017/17_05_a_amur_leopard_34.jpg" alt="Descrição da imagem">
  <div class="content">
    <div class="description">Les Hépatites A et E, et autres</div>
    <div class="icons">
      ❤️ 29
      ⭐️ 12
    </div>
  </div>
</div>

Answered By - Adriel Werlich