Aide avec shape-outside

ksta
Les bases HTML/CSS

Bonjour,

Voila je rencontre un problème pour réaliser un effet css avec le mask et shape-outside.

Ce que je veux

voici le template que je veut réaliser : design

Sur l'image on vois que le text suis l'hexagone en bas mais je souhaite mettre le texte tous le long de l'haxagone

Ce que je fais et Ce que j'obtiens

Pour que l'image de gauche est l'apparance de l'hexagone j'utilise "mask-image" et pour tenter de coller le text à l'hexagone j'utilise "shape-outside".

Le problème est que le svg utiliser pour "shape-outside" est en path et non en polygon cela ne permet pas de le rendre responsive comme vous pouvez le voir sur cette image

Voici le code html/css et le fichier hexagone : 

<v-row>
    <v-col sm="12" cols="12" class="mb-4 hexa-container">
      <v-img
        v-if="fields.image"
        :src="fields.image.url"
        class="d-block hex hex-shape"
        alt="smaple image"
        :cover="true"
      ></v-img>
      <h3 class="text-sm-h3 mb-4">Material Design Blocks</h3>

      <p>
        Lorem ipsum dolor sit amet consectetur adip elit. Maiores deleniti
        explicabo voluptatem quisquam nulla asperiores aspernatur aperiam
        voluptate et consectetur minima delectus, fugiat eum soluta blanditiis
        adipisci, velit dolore magnam.
      </p>

      <button type="button" class="btn btn-orange btn-rounded mx-0">
        Download
      </button>
    </v-col>
  </v-row>
<style lang="scss">
.hexa-container > * {
  float: left;
}

.hex {
  mask-image: url($hex-url);
  mask-repeat: no-repeat;
  mask-size: 100%;
  mask-position: left;
  mask-repeat: no-repeat;
  margin: 0 auto;
  display: block;
}

.hex-shape {
  shape-outside: url("~@/assets/img/hexagonal.svg");
}
</style>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100%" height="100%" viewBox="-187.86 -91.055 1024 921.639" enable-background="new -187.86 -91.055 1024 921.639"
     preserveAspectRatio="xMinYMin meet">
<path d="M823.483,327.233L614.726-34.295c-16.905-29.261-48.089-47.26-81.849-47.26H115.383c-33.758,0-64.933,17.999-81.851,47.26
    l-208.744,361.528c-16.878,29.259-16.878,65.266,0,94.529l208.744,361.56c16.918,29.261,48.093,47.262,81.851,47.262h417.493
    c33.762,0,64.946-18.001,81.849-47.262l208.759-361.56C840.359,392.499,840.359,356.492,823.483,327.233z"/>
</svg>

Si quelqu'un peut m'aider à réaliser cette effet et m'expliquer ce qui va pas.

Je vous remercie d'avance.

Aucune réponse