web-dev-qa-db-fra.com

Forme avec un côté incliné (réactif)

J'essaie de créer une forme comme dans l'image ci-dessous avec un bord incliné d'un seul côté (par exemple, le côté inférieur) tandis que les autres bords restent droits.

CSS div with a slanted side

J'ai essayé d'utiliser la méthode de la bordure (le code est donné ci-dessous) mais les dimensions de ma forme sont dynamiques et je ne peux donc pas utiliser cette méthode.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}
<div class="shape">
    Some content
</div>

J'ai également essayé d'utiliser des dégradés pour le fond (comme dans le code ci-dessous) mais cela se gâte lorsque les dimensions changent. Vous pouvez voir ce que je veux dire en survolant la forme dans l'extrait ci-dessous.

.gradient {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
  padding: 10px;
  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
  width: 200px;
}
<div class="gradient"></div>

Comment puis-je créer cette forme avec un côté incliné et également pouvoir prendre en charge tailles dynamiques?

htmlcsscss3responsive-designcss-shapes
83
Harry

Il existe de nombreuses façons de créer la forme avec un bord incliné d'un seul côté.

Les méthodes suivantes ne peuvent pas prendre en charge les tailles dynamiques comme déjà mentionné dans la question:

  • Méthode du triangle de bordure avec des valeurs de pixels pour border-width.
  • Gradients linéaires avec la syntaxe d'angle (comme 45 degrés, 30 degrés, etc.).

Les méthodes pouvant prendre en charge les tailles dynamiques sont décrites ci-dessous.

Méthode 1 - SVG

( Compatibilité du navigateur )

SVG peut être utilisé pour produire la forme en utilisant polygons ou paths. L'extrait ci-dessous utilise polygon. Tout contenu textuel requis peut être positionné au-dessus de la forme.

$(document).ready(function() {
  $('#increasew-vector').on('click', function() {
    $('.vector').css({
      'width': '150px',
      'height': '100px'
    });
  });
  $('#increaseh-vector').on('click', function() {
    $('.vector').css({
      'width': '100px',
      'height': '150px'
    });
  });
  $('#increaseb-vector').on('click', function() {
    $('.vector').css({
      'width': '150px',
      'height': '150px'
    });
  });
})
div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 20px;
  color: beige;
  transition: all 1s;
}
.vector {
  position: relative;
}
svg {
  position: absolute;
  margin: 10px;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: tomato;
}
.vector > span {
  position: absolute;
  display: block;
  padding: 10px;  
  z-index: 1;
}
.vector.top > span{
  height: 50%;
  width: 100%;
  top: calc(40% + 5px); /* size of the angled area + buffer */
  left: 5px;  
}
.vector.bottom > span{
  height: 50%;
  width: 100%;
  top: 5px;
  left: 5px;  
}
.vector.left > span{
  width: 50%;
  height: 100%;
  left: 50%; /* size of the angled area */
  top: 5px;  
}
.vector.right > span{
  width: 50%;
  height: 100%;
  left: 5px;
  top: 5px;  
}



/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}

polygon:hover, span:hover + svg > polygon{
  fill: steelblue;
}

.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}

button {
  width: 150px;
  margin-bottom: 10px;
}

.vector.left{
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vector bottom">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 40,0 40,100 0,60" />
  </svg>
</div>
<div class="vector top">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,40 40,0 40,100 0,100" />
  </svg>
</div>
<div class="vector left">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 40,0 40,100 20,100" />
  </svg>
</div>
<div class="vector right">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 20,0 40,100 0,100" />
  </svg>
</div>

<div class='btn-container'>
  <button id="increasew-vector">Increase Width</button>
  <button id="increaseh-vector">Increase Height</button>
  <button id="increaseb-vector">Increase Both</button>
</div>

Avantages

  • SVG est conçu pour produire des graphiques évolutifs et peut bien fonctionner avec tous les changements de dimension.
  • Les bordures et l'effet de survol peuvent être obtenus avec une surcharge de codage minimale.
  • Une image ou un fond dégradé peut également être fourni à la forme.

Inconvénients

  • La prise en charge du navigateur est probablement le seul inconvénient car IE8 ne prend pas en charge SVG, mais cela peut être atténué en utilisant des bibliothèques comme Raphael et également VML. De plus, le support du navigateur n'est en rien pire que les autres options.

Méthode 2 - Fond dégradé

( Compatibilité du navigateur )

Les dégradés linéaires peuvent toujours être utilisés pour produire la forme mais pas avec des angles comme mentionné dans la question. Nous devons utiliser le to [side] [side] syntaxe (grâce à vals ) au lieu de spécifier des angles. Lorsque des côtés sont spécifiés, les angles de dégradé sont automatiquement ajustés en fonction des dimensions du conteneur.

$(document).ready(function() {
  $('#increasew-gradient').on('click', function() {
    $('.gradient').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-gradient').on('click', function() {
    $('.gradient').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-gradient').on('click', function() {
    $('.gradient').css({
      'height': '150px',
      'width': '150px'
    });
  });
})
div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 10px 20px;
  color: beige;
  transition: all 1s;
}
.gradient{
  position: relative;
}
.gradient.bottom {
  background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 100% 40%, 100% 60%;
  background-position: 0% 100%, 0% 0%;
}
.gradient.top {
  background: linear-gradient(to bottom right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to bottom right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 100% 40%, 100% 60%;
  background-position: 0% 0%, 0% 100%;
}
.gradient.left {
  background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 40% 100%, 60% 100%;
  background-position: 0% 0%, 100% 0%;
}
.gradient.right {
  background: linear-gradient(to top left, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top left, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 40% 100%, 60% 100%;
  background-position: 100% 0%, 0% 0%;
}
.gradient span{
  position: absolute;
}
.gradient.top span{
  top: calc(40% + 5px); /* background size + buffer */ 
  left: 5px;
  height: 50%;
}
.gradient.bottom span{
  top: 5px;
  left: 5px;
  height: 50%;
}
.gradient.left span{
  left: 40%; /* background size */
  top: 5px;
  width: 50%;
}
.gradient.right span{
  left: 5px;
  top: 5px;
  width: 50%;
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}

.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
.gradient.left{
  clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient bottom"><span>Some content</span>
</div>
<div class="gradient top"><span>Some content</span>
</div>
<div class="gradient left"><span>Some content</span>
</div>
<div class="gradient right"><span>Some content</span>
</div>

<div class='btn-container'>
  <button id="increasew-gradient">Increase Width</button>
  <button id="increaseh-gradient">Increase Height</button>
  <button id="increaseb-gradient">Increase Both</button>
</div>

Avantages

  • La forme peut être obtenue et maintenue même si les dimensions du conteneur sont dynamiques.
  • L'effet de survol peut être ajouté en changeant la couleur du dégradé.

Inconvénients

  • L'effet de survol sera déclenché même lorsque le curseur est en dehors de la forme mais à l'intérieur du conteneur.
  • L'ajout de bordures nécessiterait des manipulations de dégradé délicates.
  • Les dégradés sont connus pour produire des coins irréguliers lorsque la largeur (ou la hauteur) est très grande.
  • Les arrière-plans de l'image ne peuvent pas être utilisés sur la forme.

Méthode 3 - Transformations asymétriques

( Compatibilité du navigateur )

Dans cette méthode, un pseudo-élément est ajouté, incliné et positionné de telle sorte qu'il ressemble à l'un des bords est incliné/incliné.Si le bord supérieur ou inférieur est incliné, l'inclinaison doit être le long de l'axe Y, sinon le la rotation doit être le long de l'axe X. Le transform-Origin devrait avoir le côté opposé au côté incliné.

$(document).ready(function() {
  $('#increasew-skew').on('click', function() {
    $('.skew').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-skew').on('click', function() {
    $('.skew').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-skew').on('click', function() {
    $('.skew').css({
      'height': '150px',
      'width': '150px'
    });
  });
})
div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 50px;
  color: beige;
  transition: all 1s;
}
.skew {
  padding: 10px;
  position: relative;
  background: tomato;
}
.skew:after {
  position: absolute;
  content: '';
  background: inherit;
  z-index: -1;
}
.skew.bottom:after,
.skew.top:after {
  width: 100%;
  height: 60%;
}
.skew.left:after,
.skew.right:after {
  height: 100%;
  width: 60%;
}
.skew.bottom:after {
  bottom: 0px;
  left: 0px;
  transform-Origin: top left;
  transform: skewY(22deg);
}
.skew.top:after {
  top: 0px;
  left: 0px;
  transform-Origin: top left;
  transform: skewY(-22deg);
}
.skew.left:after {
  top: 0px;
  left: 0px;
  transform-Origin: bottom left;
  transform: skewX(22deg);
}
.skew.right:after {
  top: 0px;
  right: 0px;
  transform-Origin: bottom right;
  transform: skewX(-22deg);
}
.skew:hover {
  background: steelblue;
}
/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.skew.bottom {
  margin-top: 10px;
}
.skew.left {
  clear: both;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skew bottom">Some content</div>
<div class="skew top">Some content</div>
<div class="skew left">Some content</div>
<div class="skew right">Some content</div>

<div class='btn-container'>
  <button id="increasew-skew">Increase Width</button>
  <button id="increaseh-skew">Increase Height</button>
  <button id="increaseb-skew">Increase Both</button>
</div>

Avantages

  • La forme peut être obtenue même avec des bordures.
  • L'effet de survol sera limité à l'intérieur de la forme.

Inconvénients

  • Les dimensions doivent augmenter proportionnellement pour que la forme soit conservée car lorsqu'un élément est asymétrique, son décalage sur l'axe Y augmente à mesure que width augmente et vice-versa (essayez d'augmenter le width à 200px dans l'extrait). Vous pouvez trouver plus d'informations à ce sujet ici .

Méthode 4 - Transformations en perspective

( Compatibilité du navigateur )

Dans cette méthode, le conteneur principal pivote le long de l'axe X ou Y avec un peu de perspective. Définition de la valeur appropriée sur transform-Origin produirait un bord incliné d'un seul côté.

Si le côté supérieur ou inférieur est incliné, la rotation doit être le long de l'axe Y, sinon la rotation doit être le long de l'axe X. Le transform-Origin devrait avoir le côté opposé au côté incliné.

$(document).ready(function() {
  $('#increasew-rotate').on('click', function() {
    $('.rotate').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-rotate').on('click', function() {
    $('.rotate').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-rotate').on('click', function() {
    $('.rotate').css({
      'height': '150px',
      'width': '150px'
    });
  });
})
div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 50px;
  color: beige;
  transition: all 1s;
}
.rotate {
  position: relative;
  width: 100px;
  background: tomato;
}
.rotate.bottom {
  transform-Origin: top;
  transform: perspective(10px) rotateY(-2deg);
}
.rotate.top {
  transform-Origin: bottom;
  transform: perspective(10px) rotateY(-2deg);
}
.rotate.left {
  transform-Origin: right;
  transform: perspective(10px) rotateX(-2deg);
}
.rotate.right {
  transform-Origin: left;
  transform: perspective(10px) rotateX(-2deg);
}
.rotate span {
  position: absolute;
  display: block;
  top: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
}
.rotate.bottom span {
  padding: 10px;
  transform-Origin: top;
  transform: perspective(10px) rotateY(2deg);
}
.rotate.top span {
  padding: 20px;
  transform-Origin: bottom;
  transform: perspective(20px) rotateY(2deg);
}
.rotate.left span {
  padding: 10px;
  transform-Origin: right;
  transform: perspective(10px) rotateX(2deg);
}
.rotate.right span {
  padding: 0px 30px;
  transform-Origin: left;
  transform: perspective(10px) rotateX(2deg);
}
.rotate:hover {
  background: steelblue;
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.rotate.left{
  clear:both;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate bottom"><span>Some content</span>
</div>
<div class="rotate top"><span>Some content</span>
</div>
<div class="rotate left"><span>Some content</span>
</div>
<div class="rotate right"><span>Some content</span>
</div>

<div class='btn-container'>
  <button id="increasew-rotate">Increase Width</button>
  <button id="increaseh-rotate">Increase Height</button>
  <button id="increaseb-rotate">Increase Both</button>
</div>

Avantages

  • La forme peut être obtenue avec des bordures.
  • Les dimensions n'ont pas besoin d'augmenter proportionnellement pour que la forme soit maintenue.

Inconvénients

  • Le contenu sera également tourné et par conséquent, il devra être inversé pour avoir l'air normal.
  • Le positionnement du texte sera fastidieux si les dimensions ne sont pas statiques.

Méthode 5 - Chemin de clip CSS

( Compatibilité du navigateur )

Dans cette méthode, le conteneur principal est découpé dans la forme requise à l'aide d'un polygone. Les points du polygone doivent être modifiés en fonction du côté où le bord incliné est requis.

$(document).ready(function() {
  $('#increasew-clip').on('click', function() {
    $('.clip-path').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-clip').on('click', function() {
    $('.clip-path').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-clip').on('click', function() {
    $('.clip-path').css({
      'height': '150px',
      'width': '150px'
    });
  });
})
.clip-path {
  position: relative;
  float: left;
  margin: 20px;
  height: 100px;
  width: 100px;
  background: tomato;
  padding: 4px;
  transition: all 1s;
}
.clip-path.bottom {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top {
  -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path.left {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 100%);
}
.clip-path.right {
  -webkit-clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%);
}
.clip-path .content {
  position: absolute;
  content: '';
  height: calc(100% - 10px);
  width: calc(100% - 8px);
  background: bisque;
}
.clip-path.bottom .content {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top .content {
  -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path .content.img {
  top: 6px;
  background: url(http://lorempixel.com/250/250);
  background-size: 100% 100%;
}
/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.clip-path.left {
  clear: both;
}
.clip-path:hover {
  background: gold;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 20px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clip-path bottom">
  <div class="content">abcd</div>
</div>
<div class="clip-path top">
  <div class="content img"></div>
</div>
<div class="clip-path left"></div>
<div class="clip-path right"></div>

<div class='btn-container'>
  <button id="increasew-clip">Increase Width</button>
  <button id="increaseh-clip">Increase Height</button>
  <button id="increaseb-clip">Increase Both</button>
</div>

Avantages

  • La forme peut être conservée même lorsque le conteneur est redimensionné dynamiquement.
  • L'effet de survol sera parfaitement limité dans les limites de la forme.
  • L'image peut également être utilisée comme arrière-plan pour la forme.

Inconvénients

  • Le support du navigateur est actuellement très médiocre.
  • Les bordures peuvent être ajoutées en plaçant un élément absolument positionné au-dessus de la forme et en lui donnant le clip nécessaire, mais au-delà d'un point, il ne s'adapte pas bien lors du redimensionnement dynamique.

Méthode 6 - Toile

( Compatibilité du navigateur )

La toile peut également être utilisée pour produire la forme en dessinant des chemins. L'extrait ci-dessous a une démo. Tout contenu textuel requis peut être positionné au-dessus de la forme.

window.onload = function() {
  var canvasEls = document.getElementsByTagName('canvas');
  for (var i = 0; i < canvasEls.length; i++) {
    Paint(canvasEls[i]);
  }

  function Paint(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    if (canvas.className == 'bottom') {
      ctx.moveTo(0, 0);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 60);
    } else if (canvas.className == 'top') {
      ctx.moveTo(0, 40);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 100);
    } else if (canvas.className == 'left') {
      ctx.moveTo(0, 0);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(60, 100);
    } else if (canvas.className == 'right') {
      ctx.moveTo(0, 0);
      ctx.lineTo(190, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 100);
    }
    ctx.closePath();
    ctx.lineCap = 'round';
    ctx.fillStyle = 'tomato';
    ctx.fill();
  }
  $('#increasew-canvas').on('click', function() {
    $('.container').css({
      'width': '150px',
      'height': '100px'
    });
  });
  $('#increaseh-canvas').on('click', function() {
    $('.container').css({
      'width': '100px',
      'height': '150px'
    });
  });
  $('#increaseb-canvas').on('click', function() {
    $('.container').css({
      'width': '150px',
      'height': '150px'
    });
  });
};
.container {
  float: left;
  position: relative;
  height: 100px;
  width: 100px;
  margin: 20px;
  color: beige;
  transition: all 1s;
}
canvas {
  height: 100%;
  width: 100%;
}
.container > span {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 5px;
}
.top + span {
  top: 40%; /* size of the angled area */
}
.left + span {
  left: 40%; /* size of the angled area */
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
div:nth-of-type(3) {
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <canvas height="100px" width="250px" class="bottom"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="top"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="left"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="right"></canvas> <span>Some content</span>

</div>
<div class='btn-container'>
  <button id="increasew-canvas">Increase Width</button>
  <button id="increaseh-canvas">Increase Height</button>
  <button id="increaseb-canvas">Increase Both</button>
</div>

Avantages

  • La forme peut être obtenue et maintenue même si les dimensions du conteneur sont dynamiques. Des bordures peuvent également être ajoutées.
  • L'effet de survol peut être limité à l'intérieur des limites de la forme en utilisant la méthode pointInpath.
  • Une image ou un fond dégradé peut également être fourni à la forme.
  • Un meilleur choix si des effets d'animation en temps réel sont nécessaires car il ne nécessite pas de manipulation DOM.

Inconvénients

  • Le canevas est basé sur un raster et donc les bords inclinés deviendront pixellisés ou flous lorsqu'ils seront mis à l'échelle au-delà d'un point *.

* - Pour éviter la pixellisation, il faudrait repeindre la forme chaque fois que la fenêtre est redimensionnée. Il y en a un exemple ici mais c'est une surcharge.

114
Harry

J'ai essayé d'utiliser la méthode de bordure mais les dimensions de ma forme sont dynamiques et je ne peux donc pas utiliser cette méthode.

Méthode 7 - Unités de fenêtre (Bordure Redux)

( Compatibilité du navigateur )

Viewport Units sont une grande innovation dans CSS3. Bien que vous puissiez généralement utiliser des valeurs de pourcentage pour dynamiser vos propriétés, vous ne pouvez pas le faire pour border-widths ( ni pour font-sizes ).

Avec les unités de fenêtre à la place vous pouvez définir dynamiquement vos largeurs de bordure , ainsi que les tailles de vos objets, par rapport à la dimension de la fenêtre.

Remarque: les valeurs de pourcentage se réfèrent à l'objet parent, pas à la fenêtre (zone visible de la fenêtre).

Pour tester la méthode, lancez l'extrait de code suivant Page entière et redimensionnez-le à la fois horizontalement et verticalement.

.shape {
    position: relative;
    height: 20vh;
    width: 40vw;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    top: 20vh;
    border-width: 10vh 20vw;
    border-style: solid;
    border-color: tomato tomato rgba(0,0,0,0) rgba(0,0,0,0);
}
<div class="shape">Some content</div>

Avantages 1) Tout est dynamique, la couverture du navigateur est large.

Inconvénients - (1) Vous devez faire attention à --- (comment votre système d'exploitation gère la barre de défilement avec overflow: auto;.

34
Andrea Ligios

Ma solution est inspiré de celui appelé Méthode 7 - Unités de la fenêtre par Andrea Ligios , ci-dessus dans cette page.

J'ai également utilisé l'unité "horizontale" pour la hauteur (height:10vw) pour conserver les proportions données dans le trapèze lors du redimensionnement de la largeur de la fenêtre de navigation. Nous pourrions appeler cela Méthode 7b - Largeur de la fenêtre d'affichage.

De plus, en utilisant deux div imbriqués, au lieu d'un et le :after selector, permet un meilleur réglage des styles de contenu texte, à mon avis (par exemple text-align, etc.).

.dtrapz {
  position: relative;
  margin: 10px 40vw;
  width: 0;
  height: 10vw;
  border: none;
  border-right: 20vw solid #f22;
  border-bottom: 5vw solid transparent;
}

.dtcont {
  position: absolute;
  width: 20vw;
  height: 10vw;
  text-align: center;
  color: #fff;/* just aesthetic */
}
<div class="dtrapz">
  <div class="dtcont">Some content</div>
</div>
0
MattAllegro