Kształt ze skośną stroną (responsywny)

Question 1

Próbuję utworzyć kształt jak na poniższym obrazku z ukośną krawędzią tylko z jednej strony (na przykład z dołu), podczas gdy pozostałe krawędzie pozostają proste.

CSS div z ukośną stroną

Próbowałem użyć metody granicznej (kod podano poniżej), ale wymiary mojego kształtu są dynamiczne i dlatego nie mogę użyć tej metody.

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

Rozwiń fragment

Próbowałem również użyć gradientów jako tła (jak w poniższym kodzie), ale robi się pomieszane, gdy zmieniają się wymiary. Możesz zobaczyć, co mam na myśli, najeżdżając kursorem na kształt w poniższym fragmencie.

Pokaż fragment kodu

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

Expand snippet

Jak mogę utworzyć ten kształt ze skośnym bokiem, a także być w stanie obsługiwać dynamiczne rozmiary ?

Question 2

Istnieje wiele sposobów tworzenia kształtu z ukośną krawędzią tylko z jednej strony.

Następujące metody nie obsługują rozmiarów dynamicznych, jak już wspomniano w pytaniu:

Metoda trójkąta granicznego z wartościami pikseli dla border-width.
Gradienty liniowe ze składnią kątową (np. 45 stopni, 30 stopni itp.).

Metody, które mogą obsługiwać rozmiary dynamiczne, opisano poniżej.

Metoda 1 - SVG

( Zgodność z przeglądarkami )

SVG może służyć do tworzenia kształtu za pomocą polygons lub paths. Poniższy fragment korzysta z polygon. Na górze kształtu można umieścić dowolną wymaganą treść tekstową.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

SVG jest przeznaczony do tworzenia skalowalnej grafiki i może dobrze działać przy wszystkich zmianach wymiarów.
Obramowanie i efekt najechania kursorem można osiągnąć przy minimalnym narzucie kodowania.
Do kształtu można również dodać obraz lub tło gradientowe.

Cons

Obsługa przeglądarki jest prawdopodobnie jedyną wadą, ponieważ IE8- nie obsługuje SVG, ale można to złagodzić za pomocą bibliotek takich jak Raphael, a także VML. Co więcej, obsługa przeglądarki nie jest gorsza niż inne opcje.

Metoda 2 - Gradientowe tło

( Zgodność z przeglądarkami )

Gradienty liniowe mogą być nadal używane do tworzenia kształtu, ale nie z kątami, jak wspomniano w pytaniu. Musimy użyć to [side] [side]składni (dzięki vals ) zamiast określać kąty. Po określeniu boków kąty gradientu są automatycznie dostosowywane na podstawie wymiarów kontenera.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można uzyskać i zachować, nawet jeśli wymiary pojemnika są dynamiczne.
Efekt najechania można dodać, zmieniając kolor gradientu.

Cons

Efekt najechania aktywuje się nawet wtedy, gdy kursor znajduje się poza kształtem, ale w kontenerze.
Dodanie granic wymagałoby skomplikowanej manipulacji gradientem.
Gradienty są znane z tworzenia postrzępionych narożników, gdy szerokość (lub wysokość) jest bardzo duża.
Tła obrazu nie można używać na kształcie.

Metoda 3 - Przekształcenia pochylone

( Zgodność z przeglądarkami )

W tej metodzie pseudoelement jest dodawany, pochylany i pozycjonowany w taki sposób, że wygląda na to, że jedna z krawędzi jest pochylona / pod kątem. Jeśli górna lub dolna krawędź jest pochylona, to skos powinien przebiegać wzdłuż osi Y, w przeciwnym razie obrót powinien odbywać się wzdłuż osi X. transform-originPowinny mieć boczny naprzeciw pochyłej stronie.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można uzyskać nawet z brzegami.
Efekt najechania będzie ograniczony do kształtu.

Cons

Wymiary muszą rosnąć proporcjonalnie, aby kształt został zachowany, ponieważ gdy element jest pochylony, jego przesunięcie na osi Y zwiększa się wraz ze widthwzrostem i odwrotnie (spróbuj zwiększyć widthdo 200pxwe fragmencie). Więcej informacji na ten temat znajdziesz tutaj .

Metoda 4 - Przekształcenia perspektywy

( Zgodność z przeglądarkami )

W tej metodzie główny pojemnik jest obracany wzdłuż osi X lub Y z odrobiną perspektywy. Ustawienie odpowiedniej wartości na transform-originspowoduje powstanie ukośnej krawędzi tylko z jednej strony.

Jeśli górna lub dolna strona jest pochylona, obrót powinien odbywać się wzdłuż osi Y, w przeciwnym razie obrót powinien odbywać się wzdłuż osi X. transform-originPowinny mieć boczny naprzeciw pochyłej stronie.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można uzyskać za pomocą granic.
Wymiary nie muszą zwiększać się proporcjonalnie, aby kształt został zachowany.

Cons

Treść również zostanie obrócona, dlatego należy ją obrócić w przeciwną stronę, aby wyglądała normalnie.
Pozycjonowanie tekstu będzie żmudne, jeśli wymiary nie są statyczne.

Metoda 5 - ścieżka klipu CSS

( Zgodność z przeglądarkami )

W tej metodzie główny pojemnik jest przycinany do wymaganego kształtu za pomocą wielokąta. Punkty wielokąta należy zmodyfikować w zależności od strony, po której wymagana jest skośna krawędź.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można zachować nawet w przypadku dynamicznej zmiany rozmiaru kontenera.
Efekt zawisu będzie doskonale ograniczony w granicach kształtu.
Obraz może również służyć jako tło kształtu.

Cons

Obsługa przeglądarek jest obecnie bardzo słaba.
Obramowania można dodawać, umieszczając element pozycjonowany absolutnie na górze kształtu i nadając mu niezbędny klip, ale poza punktem nie pasuje on dobrze podczas dynamicznej zmiany rozmiaru.

Metoda 6 - Płótno

( Zgodność z przeglądarkami )

Kanwy można również używać do tworzenia kształtu poprzez rysowanie ścieżek. Poniższy fragment zawiera demo. Na górze kształtu można umieścić dowolną wymaganą treść tekstową.

Pokaż fragment kodu

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>

Rozwiń fragment

Plusy

Kształt można uzyskać i zachować, nawet jeśli wymiary pojemnika są dynamiczne. Można również dodać obramowania.
Efekt najechania można ograniczyć do granic kształtu przy użyciu pointInpathmetody.
Do kształtu można również dodać obraz lub tło gradientowe.
Lepszy wybór, jeśli potrzebne są efekty animacji w czasie rzeczywistym, ponieważ nie wymaga to manipulacji DOM.

Cons

Płótno jest oparte na rastrze, dlatego krawędzie ustawione pod kątem zostaną podzielone na piksele lub rozmyte po przeskalowaniu poza punkt ^* .

^{* - Unikanie pikselizacji wymagałoby ponownego malowania kształtu przy każdej zmianie rozmiaru widocznego obszaru. Jest to przykład tego tutaj , ale to jest na górze.}

Question 3

Próbowałem użyć metody granicznej, ale wymiary mojego kształtu są dynamiczne i dlatego nie mogę użyć tej metody.

Metoda 7 - Jednostki rzutni ^{( Redukcja obramowania )}

( Zgodność z przeglądarkami )

Viewport Units to wielka innowacja w CSS3. Chociaż zwykle możesz użyć wartości procentowych do dynamizacji właściwości, nie możesz tego zrobić dla border-widths ( ani dla font-sizes ).

Zamiast tego za pomocą jednostek rzutni możesz dynamicznie ustawiać szerokość obramowania wraz z rozmiarami obiektów w porównaniu z wymiarem rzutni.

_{Uwaga: wartości procentowe odnoszą się do obiektu nadrzędnego, a nie do rzutni (widoczny obszar okna).}

Aby przetestować metodę, uruchom poniższy fragment kodu Full Page i zmień jego rozmiar zarówno w poziomie, jak iw pionie.

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

Rozwiń fragment

Zalety - (1) wszystko jest dynamiczne, przeglądarka ma szeroki zasięg.

Wady - (1) Należy zwrócić uwagę na jaki system operacyjny obsługuje przewijania z overflow: auto;.

Question 4

Moje rozwiązanie jest inspirowane metodą o nazwie Method 7 - Viewport Units autorstwa Andrei Ligios, powyżej na tej stronie.

Użyłem także jednostki „poziomej” dla wysokości ( height:10vw), aby zachować podane proporcje w trapezie podczas zmiany szerokości okna nawigacji. Moglibyśmy nazwać tę metodę 7b - szerokość rzutni .

Ponadto, moim zdaniem , użycie dwóch zagnieżdżonych divs zamiast jednego i :afterselektora pozwala na lepsze dostrojenie stylów treści tekstu (np. text-alignItp.).

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

Rozwiń fragment

Answer 1

Próbuję utworzyć kształt jak na poniższym obrazku z ukośną krawędzią tylko z jednej strony (na przykład z dołu), podczas gdy pozostałe krawędzie pozostają proste.

CSS div z ukośną stroną

Próbowałem użyć metody granicznej (kod podano poniżej), ale wymiary mojego kształtu są dynamiczne i dlatego nie mogę użyć tej metody.

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

Rozwiń fragment

Próbowałem również użyć gradientów jako tła (jak w poniższym kodzie), ale robi się pomieszane, gdy zmieniają się wymiary. Możesz zobaczyć, co mam na myśli, najeżdżając kursorem na kształt w poniższym fragmencie.

Pokaż fragment kodu

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

Expand snippet

Jak mogę utworzyć ten kształt ze skośnym bokiem, a także być w stanie obsługiwać dynamiczne rozmiary ?

Answer 2

Istnieje wiele sposobów tworzenia kształtu z ukośną krawędzią tylko z jednej strony.

Następujące metody nie obsługują rozmiarów dynamicznych, jak już wspomniano w pytaniu:

Metoda trójkąta granicznego z wartościami pikseli dla border-width.
Gradienty liniowe ze składnią kątową (np. 45 stopni, 30 stopni itp.).

Metody, które mogą obsługiwać rozmiary dynamiczne, opisano poniżej.

Metoda 1 - SVG

( Zgodność z przeglądarkami )

SVG może służyć do tworzenia kształtu za pomocą polygons lub paths. Poniższy fragment korzysta z polygon. Na górze kształtu można umieścić dowolną wymaganą treść tekstową.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

SVG jest przeznaczony do tworzenia skalowalnej grafiki i może dobrze działać przy wszystkich zmianach wymiarów.
Obramowanie i efekt najechania kursorem można osiągnąć przy minimalnym narzucie kodowania.
Do kształtu można również dodać obraz lub tło gradientowe.

Cons

Obsługa przeglądarki jest prawdopodobnie jedyną wadą, ponieważ IE8- nie obsługuje SVG, ale można to złagodzić za pomocą bibliotek takich jak Raphael, a także VML. Co więcej, obsługa przeglądarki nie jest gorsza niż inne opcje.

Metoda 2 - Gradientowe tło

( Zgodność z przeglądarkami )

Gradienty liniowe mogą być nadal używane do tworzenia kształtu, ale nie z kątami, jak wspomniano w pytaniu. Musimy użyć to [side] [side]składni (dzięki vals ) zamiast określać kąty. Po określeniu boków kąty gradientu są automatycznie dostosowywane na podstawie wymiarów kontenera.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można uzyskać i zachować, nawet jeśli wymiary pojemnika są dynamiczne.
Efekt najechania można dodać, zmieniając kolor gradientu.

Cons

Efekt najechania aktywuje się nawet wtedy, gdy kursor znajduje się poza kształtem, ale w kontenerze.
Dodanie granic wymagałoby skomplikowanej manipulacji gradientem.
Gradienty są znane z tworzenia postrzępionych narożników, gdy szerokość (lub wysokość) jest bardzo duża.
Tła obrazu nie można używać na kształcie.

Metoda 3 - Przekształcenia pochylone

( Zgodność z przeglądarkami )

W tej metodzie pseudoelement jest dodawany, pochylany i pozycjonowany w taki sposób, że wygląda na to, że jedna z krawędzi jest pochylona / pod kątem. Jeśli górna lub dolna krawędź jest pochylona, to skos powinien przebiegać wzdłuż osi Y, w przeciwnym razie obrót powinien odbywać się wzdłuż osi X. transform-originPowinny mieć boczny naprzeciw pochyłej stronie.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można uzyskać nawet z brzegami.
Efekt najechania będzie ograniczony do kształtu.

Cons

Wymiary muszą rosnąć proporcjonalnie, aby kształt został zachowany, ponieważ gdy element jest pochylony, jego przesunięcie na osi Y zwiększa się wraz ze widthwzrostem i odwrotnie (spróbuj zwiększyć widthdo 200pxwe fragmencie). Więcej informacji na ten temat znajdziesz tutaj .

Metoda 4 - Przekształcenia perspektywy

( Zgodność z przeglądarkami )

W tej metodzie główny pojemnik jest obracany wzdłuż osi X lub Y z odrobiną perspektywy. Ustawienie odpowiedniej wartości na transform-originspowoduje powstanie ukośnej krawędzi tylko z jednej strony.

Jeśli górna lub dolna strona jest pochylona, obrót powinien odbywać się wzdłuż osi Y, w przeciwnym razie obrót powinien odbywać się wzdłuż osi X. transform-originPowinny mieć boczny naprzeciw pochyłej stronie.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można uzyskać za pomocą granic.
Wymiary nie muszą zwiększać się proporcjonalnie, aby kształt został zachowany.

Cons

Treść również zostanie obrócona, dlatego należy ją obrócić w przeciwną stronę, aby wyglądała normalnie.
Pozycjonowanie tekstu będzie żmudne, jeśli wymiary nie są statyczne.

Metoda 5 - ścieżka klipu CSS

( Zgodność z przeglądarkami )

W tej metodzie główny pojemnik jest przycinany do wymaganego kształtu za pomocą wielokąta. Punkty wielokąta należy zmodyfikować w zależności od strony, po której wymagana jest skośna krawędź.

Pokaż fragment kodu

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

Rozwiń fragment

Plusy

Kształt można zachować nawet w przypadku dynamicznej zmiany rozmiaru kontenera.
Efekt zawisu będzie doskonale ograniczony w granicach kształtu.
Obraz może również służyć jako tło kształtu.

Cons

Obsługa przeglądarek jest obecnie bardzo słaba.
Obramowania można dodawać, umieszczając element pozycjonowany absolutnie na górze kształtu i nadając mu niezbędny klip, ale poza punktem nie pasuje on dobrze podczas dynamicznej zmiany rozmiaru.

Metoda 6 - Płótno

( Zgodność z przeglądarkami )

Kanwy można również używać do tworzenia kształtu poprzez rysowanie ścieżek. Poniższy fragment zawiera demo. Na górze kształtu można umieścić dowolną wymaganą treść tekstową.

Pokaż fragment kodu

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>

Rozwiń fragment

Plusy

Kształt można uzyskać i zachować, nawet jeśli wymiary pojemnika są dynamiczne. Można również dodać obramowania.
Efekt najechania można ograniczyć do granic kształtu przy użyciu pointInpathmetody.
Do kształtu można również dodać obraz lub tło gradientowe.
Lepszy wybór, jeśli potrzebne są efekty animacji w czasie rzeczywistym, ponieważ nie wymaga to manipulacji DOM.

Cons

Płótno jest oparte na rastrze, dlatego krawędzie ustawione pod kątem zostaną podzielone na piksele lub rozmyte po przeskalowaniu poza punkt ^* .

^{* - Unikanie pikselizacji wymagałoby ponownego malowania kształtu przy każdej zmianie rozmiaru widocznego obszaru. Jest to przykład tego tutaj , ale to jest na górze.}

Answer 3

Próbowałem użyć metody granicznej, ale wymiary mojego kształtu są dynamiczne i dlatego nie mogę użyć tej metody.

Metoda 7 - Jednostki rzutni ^{( Redukcja obramowania )}

( Zgodność z przeglądarkami )

Viewport Units to wielka innowacja w CSS3. Chociaż zwykle możesz użyć wartości procentowych do dynamizacji właściwości, nie możesz tego zrobić dla border-widths ( ani dla font-sizes ).

Zamiast tego za pomocą jednostek rzutni możesz dynamicznie ustawiać szerokość obramowania wraz z rozmiarami obiektów w porównaniu z wymiarem rzutni.

_{Uwaga: wartości procentowe odnoszą się do obiektu nadrzędnego, a nie do rzutni (widoczny obszar okna).}

Aby przetestować metodę, uruchom poniższy fragment kodu Full Page i zmień jego rozmiar zarówno w poziomie, jak iw pionie.

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

Rozwiń fragment

Zalety - (1) wszystko jest dynamiczne, przeglądarka ma szeroki zasięg.

Wady - (1) Należy zwrócić uwagę na jaki system operacyjny obsługuje przewijania z overflow: auto;.

Answer 4

3

Wygląda na postrzępiony w najnowszej wersji Chrome.

Mr_Green

Answer 5

Prawdziwe! Wydaje mi się, że silniki przeglądarek nadal potrzebują trochę czasu, aby sprawnie to wyrenderować. Firefox ma również ten problem, gdy używa tej techniki z pikselami zamiast jednostek widoku, ale można go naprawić za pomocą rgba (,,, 0) zamiast przezroczystości. Na szczęście mamy teraz inne opcje;)

Andrea Ligios

Answer 6

Moje rozwiązanie jest inspirowane metodą o nazwie Method 7 - Viewport Units autorstwa Andrei Ligios, powyżej na tej stronie.

Użyłem także jednostki „poziomej” dla wysokości ( height:10vw), aby zachować podane proporcje w trapezie podczas zmiany szerokości okna nawigacji. Moglibyśmy nazwać tę metodę 7b - szerokość rzutni .

Ponadto, moim zdaniem , użycie dwóch zagnieżdżonych divs zamiast jednego i :afterselektora pozwala na lepsze dostrojenie stylów treści tekstu (np. text-alignItp.).

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

Rozwiń fragment

Answer 7

@ Downvoter Cześć! Daj mi znać, co jest nie tak z moją odpowiedzią, abym mógł ją edytować lub usunąć, jeśli ma to sens! Nie jestem specjalistą, ale wydaje mi się, że można to zastosować na wielu stronach, pracować z dłuższą zawartością tekstu, tylko w zależności od szerokości :)

MattAllegro

Kształt ze skośną stroną (responsywny)

Odpowiedzi:

Metoda 1 - SVG

Metoda 2 - Gradientowe tło

Metoda 3 - Przekształcenia pochylone

Metoda 4 - Przekształcenia perspektywy

Metoda 5 - ścieżka klipu CSS

Metoda 6 - Płótno

Metoda 7 - Jednostki rzutni ( Redukcja obramowania )

Metoda 7 - Jednostki rzutni ^{( Redukcja obramowania )}