Form mit einer schrägen Seite (ansprechend)

Ich versuche, eine Form wie im Bild unten mit einer schrägen Kante auf nur einer Seite (z. B. der Unterseite) zu erstellen , während die anderen Kanten gerade bleiben.

CSS div mit einer schrägen Seite

Ich habe versucht, die Rahmenmethode zu verwenden (Code ist unten angegeben), aber die Abmessungen meiner Form sind dynamisch und daher kann ich diese Methode nicht verwenden.

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

Erweitern Sie das Snippet

Ich habe auch versucht, Farbverläufe für den Hintergrund zu verwenden (wie im folgenden Code), aber es wird durcheinander gebracht, wenn sich die Abmessungen ändern. Sie können sehen, was ich meine, indem Sie im folgenden Ausschnitt über der Form schweben.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Wie kann ich diese Form mit einer schrägen Seite erstellen und auch dynamische Größen unterstützen ?

— Harry
quelle

125

Es gibt viele Möglichkeiten, die Form mit einer schrägen Kante nur auf einer Seite zu erstellen.

Die folgenden Methoden können keine dynamischen Größen unterstützen, wie bereits in der Frage erwähnt:

Randdreieckmethode mit Pixelwerten für border-width.
Lineare Verläufe mit der Winkelsyntax (wie 45 Grad, 30 Grad usw.).

Die Methoden, die dynamische Größen unterstützen können, werden unten beschrieben.

Methode 1 - SVG

( Browserkompatibilität )

SVG kann verwendet werden, um die Form entweder mit polygons oder paths zu erzeugen . Das folgende Snippet verwendet polygon. Jeder erforderliche Textinhalt kann über der Form positioniert werden.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Vorteile

SVG wurde entwickelt, um skalierbare Grafiken zu erstellen und kann mit allen Dimensionsänderungen gut funktionieren.
Rahmen und Schwebeeffekt können mit minimalem Codierungsaufwand erzielt werden.
Der Form kann auch ein Bild- oder Verlaufshintergrund bereitgestellt werden.

Nachteile

Die Browserunterstützung ist wahrscheinlich der einzige Nachteil, da IE8 SVG nicht unterstützt. Dies kann jedoch durch die Verwendung von Bibliotheken wie Raphael und auch VML verringert werden. Darüber hinaus ist die Browserunterstützung keineswegs schlechter als die anderen Optionen.

Methode 2 - Gradientenhintergrund

( Browserkompatibilität )

Lineare Farbverläufe können weiterhin verwendet werden, um die Form zu erzeugen, jedoch nicht mit Winkeln, wie in der Frage erwähnt. Wir müssen die to [side] [side]Syntax (dank vals ) verwenden, anstatt Winkel anzugeben. Wenn Seiten angegeben werden, werden die Verlaufswinkel automatisch basierend auf den Abmessungen des Containers angepasst.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Vorteile

Die Form kann auch dann erreicht und beibehalten werden, wenn die Abmessungen des Behälters dynamisch sind.
Der Hover-Effekt kann durch Ändern der Verlaufsfarbe hinzugefügt werden.

Nachteile

Der Hover-Effekt wird auch dann ausgelöst, wenn sich der Cursor außerhalb der Form, aber innerhalb des Containers befindet.
Das Hinzufügen von Rahmen würde schwierige Manipulationen des Verlaufs erfordern.
Farbverläufe sind dafür bekannt, gezackte Ecken zu erzeugen, wenn die Breite (oder Höhe) sehr groß ist.
Bildhintergründe können nicht für die Form verwendet werden.

Methode 3 - Skew-Transformationen

( Browserkompatibilität )

Bei dieser Methode wird ein Pseudoelement hinzugefügt, verzerrt und so positioniert, dass es so aussieht, als ob eine der Kanten geneigt / abgewinkelt ist. Wenn die obere oder untere Kante geneigt ist, sollte der Versatz entlang der Y-Achse liegen, andernfalls der Die Drehung sollte entlang der X-Achse erfolgen. Die Seite transform-originsollte der schrägen Seite gegenüberliegen.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Vorteile

Form kann auch mit Rändern erreicht werden.
Der Hover-Effekt wird auf die Form beschränkt.

Nachteile

Die Abmessungen müssen proportional erhöht werden, damit die Form beibehalten wird. Wenn ein Element schief ist, nimmt sein Versatz in der Y-Achse mit zunehmender widthGröße zu und umgekehrt (versuchen Sie width, 200pxdas To im Snippet zu erhöhen ). Weitere Informationen hierzu finden Sie hier .

Methode 4 - Perspektiventransformationen

( Browserkompatibilität )

Bei dieser Methode wird der Hauptcontainer mit etwas Perspektive entlang der X- oder Y-Achse gedreht. Wenn Sie den entsprechenden Wert auf transform-origineinstellen, wird nur auf einer Seite eine schräge Kante erzeugt.

Wenn die Ober- oder Unterseite geneigt ist, sollte die Drehung entlang der Y-Achse erfolgen, andernfalls sollte die Drehung entlang der X-Achse erfolgen. Die Seite transform-originsollte der schrägen Seite gegenüberliegen.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Vorteile

Form kann mit Rändern erreicht werden.
Die Abmessungen müssen nicht proportional erhöht werden, damit die Form erhalten bleibt.

Nachteile

Der Inhalt wird ebenfalls gedreht, und daher müssen sie gegengedreht werden, um normal auszusehen.
Das Positionieren von Text ist mühsam, wenn die Abmessungen nicht statisch sind.

Methode 5 - CSS-Clip-Pfad

( Browserkompatibilität )

Bei dieser Methode wird der Hauptcontainer mithilfe eines Polygons in die gewünschte Form geschnitten. Die Punkte des Polygons sollten abhängig von der Seite geändert werden, auf der die schräge Kante benötigt wird.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Vorteile

Die Form kann auch dann beibehalten werden, wenn die Größe des Containers dynamisch geändert wird.
Der Hover-Effekt wird innerhalb der Grenzen der Form perfekt eingeschränkt.
Das Bild kann auch als Hintergrund für die Form verwendet werden.

Nachteile

Die Browserunterstützung ist derzeit sehr schlecht.
Rahmen können hinzugefügt werden, indem ein absolut positioniertes Element über der Form platziert und ihr der erforderliche Clip zugewiesen wird. Über einen Punkt hinaus passt es jedoch nicht gut, wenn die Größe dynamisch geändert wird.

Methode 6 - Leinwand

( Browserkompatibilität )

Leinwand kann auch verwendet werden, um die Form durch Zeichnen von Pfaden zu erzeugen. Das folgende Snippet enthält eine Demo. Jeder erforderliche Textinhalt kann über der Form positioniert werden.

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Vorteile

Die Form kann auch dann erreicht und beibehalten werden, wenn die Abmessungen des Behälters dynamisch sind. Rahmen können ebenfalls hinzugefügt werden.
Der Hover-Effekt kann mithilfe der pointInpathMethode auf die Grenzen der Form beschränkt werden.
Der Form kann auch ein Bild- oder Verlaufshintergrund bereitgestellt werden.
Bessere Wahl, wenn Echtzeit-Animationseffekte benötigt werden, da keine DOM-Manipulation erforderlich ist.

Nachteile

Canvas basiert auf Raster und daher werden die abgewinkelten Kanten pixelig oder unscharf, wenn sie über einen Punkt ^* hinaus skaliert werden .

^{* - Um eine Pixelierung zu vermeiden, müssen Sie die Form bei jeder Größenänderung des Ansichtsfensters neu streichen. Hier gibt es ein Beispiel dafür , aber das ist ein Overhead.}

— Harry
quelle

Ich habe versucht, die Rahmenmethode zu verwenden, aber die Abmessungen meiner Form sind dynamisch und daher kann ich diese Methode nicht verwenden.

Methode 7 - Ansichtsfenstereinheiten ^{(Border Redux )}

( Browserkompatibilität )

Ansichtsfenster-Einheiten sind eine großartige Innovation in CSS3. Während Sie normalerweise Prozentwerte verwenden können, um Ihre Eigenschaften zu dynamisieren, können Sie dies nicht für border-widths ( noch für font-sizes ) tun .

Mit Ansichtsfenstereinheiten können Sie stattdessen Ihre Rahmenbreiten sowie die Größe Ihrer Objekte im Vergleich zur Ansichtsfensterdimension dynamisch festlegen .

_{Hinweis: Prozentwerte beziehen sich auf das übergeordnete Objekt und nicht auf das Ansichtsfenster (sichtbarer Bereich des Fensters).}

Starten Sie zum Testen der Methode das folgende Snippet Full Page und ändern Sie die Größe horizontal und vertikal.

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

Erweitern Sie das Snippet

Vorteile - (1) Alles ist dynamisch, die Browserabdeckung ist breit.

Nachteile - (1) sollten Sie achten auf , wie Sie Ihr Betriebssystem die Scrollbar Griffe mit overflow: auto;.

— Andrea Ligios
quelle

Es scheint in der neuesten Version von Chrom gezackt.

— Mr_Green

Wahr! Ich denke, Browser-Engines brauchen noch einige Zeit, um dies reibungslos zu rendern. Firefox hat auch dieses Problem, wenn diese Technik mit Pixeln anstelle von Ansichtsfenstereinheiten verwendet wird. Sie kann jedoch behoben werden, indem rgba (,,, 0) anstelle von transparent verwendet wird. Zum Glück haben wir gerade andere Möglichkeiten;)

— Andrea Ligios

Meine Lösung ist inspiriert von der Methode 7 - Ansichtsfenster-Einheiten von Andrea Ligios oben auf dieser Seite.

Ich habe die "horizontale" Einheit auch für die Höhe verwendet ( height:10vw), um die angegebenen Proportionen im Trapez beizubehalten, wenn die Breite des Navigationsfensters geändert wird. Wir könnten diese Methode 7b - Ansichtsfensterbreite nennen .

Darüber hinaus ermöglicht die Verwendung von zwei verschachtelten divs anstelle von einem und dem :afterSelektor meiner Meinung nach eine bessere Abstimmung der Textinhaltsstile (z text-align. B. usw.).

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

Erweitern Sie das Snippet

— MattAllegro
quelle

@ Downvoter Hallo! Lassen Sie mich wissen, was mit meiner Antwort nicht stimmt, damit ich sie bearbeiten oder löschen kann, wenn dies sinnvoll ist! Ich bin kein Spezialist, aber es scheint mir, dass dies auf vielen Seiten angewendet werden könnte, mit längerem Textinhalt arbeiten, nur abhängig von der Breite :)

— MattAllegro

Form mit einer schrägen Seite (ansprechend)

Methode 1 - SVG

Methode 2 - Gradientenhintergrund

Methode 3 - Skew-Transformationen

Methode 4 - Perspektiventransformationen

Methode 5 - CSS-Clip-Pfad

Methode 6 - Leinwand

Methode 7 - Ansichtsfenstereinheiten (Border Redux )

Methode 7 - Ansichtsfenstereinheiten ^{(Border Redux )}