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

90

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 avec un côté incliné

J'ai essayé d'utiliser la méthode border (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>

Développer l'extrait

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

Afficher l'extrait de code

.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>

Développer l'extrait

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

html css responsive-design css-shapes Harry
la source

Réponses:

126

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 de triangle de bordure avec des valeurs de pixel pour border-width.
Dégradés linéaires avec la syntaxe d'angle (comme 45deg, 30deg, etc.).

Les méthodes qui peuvent 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 de texte requis peut être positionné au-dessus de la forme.

Afficher l'extrait de code

$(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>

Développer l'extrait

Avantages

SVG est conçu pour produire des graphiques évolutifs et peut bien fonctionner avec tous les changements de dimension.
Les frontières 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.

Les 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 VML. De plus, la prise en charge du navigateur n'est en aucun cas 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 la to [side] [side]syntaxe (grâce à vals ) au lieu de spécifier des angles. Lorsque les côtés sont spécifiés, les angles de dégradé sont automatiquement ajustés en fonction des dimensions du conteneur.

Afficher l'extrait de code

$(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>

Développer l'extrait

Avantages

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

Les inconvénients

L'effet de survol sera déclenché même lorsque le curseur est à l'extérieur de la forme mais dans le 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 d'image ne peuvent pas être utilisés sur la forme.

Méthode 3 - Transformations obliques

( Compatibilité du navigateur )

Dans cette méthode, un pseudo-élément est ajouté, incliné et positionné de telle manière 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-origindoit avoir le côté opposé au côté incliné.

Afficher l'extrait de code

$(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>

Développer l'extrait

Avantages

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

Les inconvénients

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

Méthode 4 - Transformations de perspective

( Compatibilité du navigateur )

Dans cette méthode, le conteneur principal est tourné le long de l'axe X ou Y avec un peu de perspective. Définir la valeur appropriée sur transform-originproduirait un bord incliné sur 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-origindoit avoir le côté opposé au côté incliné.

Afficher l'extrait de code

$(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>

Développer l'extrait

Avantages

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

Les inconvénients

Le contenu sera également tourné et par conséquent, ils doivent être contre-tournés pour avoir l'air normal.
Le positionnement du texte sera fastidieux si les dimensions ne sont pas statiques.

Méthode 5 - Chemin du 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ù l'arête inclinée est requise.

Afficher l'extrait de code

$(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>

Développer l'extrait

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 de la forme.

Les inconvénients

La prise en charge des navigateurs est actuellement très médiocre.
Des bordures peuvent être ajoutées en plaçant un élément absolument positionné sur le 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 )

Le canevas peut également être utilisé pour produire la forme en dessinant des tracés. L'extrait ci-dessous a une démo. Tout contenu de texte requis peut être positionné au-dessus de la forme.

Afficher l'extrait de code

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>

Développer l'extrait

Avantages

La forme peut être obtenue et conservée 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 à l'aide de pointInpathmethod.
Une image ou un fond dégradé peut également être fourni à la forme.
Meilleur choix si des effets d'animation en temps réel sont nécessaires car il ne nécessite pas de manipulation DOM.

Les inconvénients

Le canevas est basé sur un raster et par conséquent, les bords inclinés deviennent pixélisés ou flous lorsqu'ils sont 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.}

Harry
la source

35

J'ai essayé d'utiliser la méthode des bordures 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 ^{(Border Redux )}

( Compatibilité du navigateur )

Les 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 la fenêtre, vous pouvez définir de manière dynamique la largeur de vos bordures , ainsi que la taille de vos objets, par rapport à la dimension de la fenêtre.

_{Remarque: les valeurs en pourcentage se réfèrent à l'objet parent et non à la fenêtre (zone visible de la fenêtre).}

Pour tester la méthode, lancez l'extrait de code Pleine page suivant et redimensionnez-le 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>

Développer l'extrait

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

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

Andrea Ligios
la source

3

Il semble irrégulier dans la dernière version de chrome.

Mr_Green

Vrai! Je suppose que les moteurs de navigateur ont encore besoin de temps pour rendre cela en douceur. Firefox a également ce problème lors de l'utilisation de cette technique avec des pixels au lieu d'unités de fenêtre, mais il peut être corrigé en utilisant rgba (,,, 0) au lieu de transparent. Heureusement, nous avons d'autres options pour le moment;)

Andrea Ligios

1

Ma solution est inspirée de celle appelée Method 7 - Viewport Units d'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 cette méthode 7b - Largeur de la fenêtre .

De plus, l'utilisation de deux divs imbriqués , au lieu d'un et du :aftersélecteur, permet un meilleur réglage des styles de contenu de 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>

Développer l'extrait

MattAllegro
la source

@ Downvoter Salut! Faites-moi savoir ce qui ne va pas avec ma réponse, afin que je puisse la modifier ou la supprimer si cela a du sens! Je ne suis pas un spécialiste mais il me semble que cela pourrait être appliqué sur de nombreuses pages, travailler avec du texte plus long, en fonction de la largeur uniquement :)

MattAllegro