Eğimli bir tarafla şekil verin (duyarlı)

Question 1

Aşağıdaki resimdeki gibi sadece bir tarafta (örneğin alt tarafta) eğimli kenar diğer kenarlar düz kalırken bir şekil oluşturmaya çalışıyorum .

Eğik kenarlı CSS div

Border yöntemini kullanmayı denedim (kod aşağıda verilmiştir) ancak şeklimin boyutları dinamik ve bu nedenle bu yöntemi kullanamıyorum.

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

Snippet'i genişlet

Ayrıca arka plan için degradeler kullanmayı denedim (aşağıdaki kodda olduğu gibi), ancak boyutlar değiştikçe karışıyor. Aşağıdaki parçadaki şeklin üzerine gelerek ne demek istediğimi anlayabilirsiniz.

Kod parçacığını göster

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

Snippet'i genişlet

Bu şekli eğimli bir tarafla nasıl oluşturabilirim ve aynı zamanda dinamik boyutları destekleyebilir miyim?

Question 2

Sadece bir tarafta eğimli kenarlı bir şekil oluşturmanın birçok yolu vardır.

Aşağıdaki yöntemler, soruda daha önce belirtildiği gibi dinamik boyutları destekleyemez:

İçin piksel değerleri ile sınır üçgeni yöntemi border-width.
Açı sözdizimine sahip doğrusal degradeler (45deg, 30deg gibi).

Dinamik boyutları destekleyebilecek yöntemler aşağıda açıklanmıştır.

Yöntem 1 - SVG

( Tarayıcı Uyumluluğu )

SVG, polygons veya paths kullanılarak şekli oluşturmak için kullanılabilir . Aşağıdaki kod parçacığı kullanır polygon. Gerekli herhangi bir metin içeriği şeklin üstüne yerleştirilebilir.

Kod parçacığını göster

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

Snippet'i genişlet

Artıları

SVG, ölçeklenebilir grafikler üretmek için tasarlanmıştır ve tüm boyut değişiklikleriyle iyi çalışabilir.
Sınırlar ve gezinme efekti, minimum kodlama ek yükü ile elde edilebilir.
Şekle görüntü veya gradyan arka planı da sağlanabilir.

Eksileri

Tarayıcı desteği muhtemelen tek dezavantajıdır çünkü IE8 SVG'yi desteklemiyor ancak bu, Raphael ve ayrıca VML gibi kütüphaneler kullanılarak azaltılabilir. Dahası, tarayıcı desteği hiçbir şekilde diğer seçeneklerden daha kötü değildir.

Yöntem 2 - Gradyan Arka Planı

( Tarayıcı Uyumluluğu )

Doğrusal gradyanlar yine de şekli üretmek için kullanılabilir, ancak soruda belirtildiği gibi açılarla kullanılamaz. Biz kullanmak zorunda to [side] [side](sayesinde sözdizimi vals yerine açıları belirleme). Kenarlar belirtildiğinde, gradyan açıları kabın boyutlarına göre otomatik olarak ayarlanır.

Kod parçacığını göster

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

Snippet'i genişlet

Artıları

Kabın boyutları dinamik olsa bile şekil elde edilebilir ve korunabilir.
Gradyan rengi değiştirilerek üzerine gelme efekti eklenebilir.

Eksileri

İmleç şeklin dışında ancak kabın içinde olduğunda bile fareyle üzerine gelme efekti tetiklenecektir.
Kenarlık eklemek, zor degrade manipülasyonları gerektirir.
Genişlik (veya yükseklik) çok büyük olduğunda gradyanların pürüzlü köşeler ürettiği bilinmektedir.
Şekil üzerinde resim arka planı kullanılamaz.

Yöntem 3 - Eğriltme Dönüşümleri

( Tarayıcı Uyumluluğu )

Bu yöntemde, bir sözde eleman eklenir, eğrilir ve kenarlardan biri eğimli / açılı görünecek şekilde konumlandırılır.Üst veya alt kenar eğimli ise, eğim Y ekseni boyunca olmalıdır, aksi takdirde dönüş X ekseni boyunca olmalıdır. transform-originEğimli tarafa yan tersini sahip olmalıdır.

Kod parçacığını göster

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

Snippet'i genişlet

Artıları

Sınırlarla bile şekil elde edilebilir.
Fareyle üzerine gelme efekti, şeklin içindekilerle sınırlı olacaktır.

Eksileri

Şekilin korunması için boyutların orantılı olarak artması gerekir, çünkü bir öğe eğik olduğunda, Y eksenindeki ofseti arttıkça widthartar ve bunun tersi de geçerlidir ( parçacığın içindeki widthdeğerini artırmayı deneyin 200px). Bununla ilgili daha fazla bilgiyi burada bulabilirsiniz .

Yöntem 4 - Perspektif Dönüşümleri

( Tarayıcı Uyumluluğu )

Bu yöntemde, ana kap, biraz perspektifle X veya Y ekseni boyunca döndürülür. Uygun değerin olarak ayarlanması, transform-originyalnızca bir tarafta eğimli bir kenar oluşturacaktır.

Üst veya alt taraf eğimli ise, dönüş Y ekseni boyunca olmalı, aksi takdirde dönüş X ekseni boyunca olmalıdır. transform-originEğimli tarafa yan tersini sahip olmalıdır.

Kod parçacığını göster

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

Snippet'i genişlet

Artıları

Kenarlıklar ile şekil elde edilebilir.
Şeklin korunması için boyutların orantılı olarak artması gerekmez.

Eksileri

İçerik de döndürülecek ve bu nedenle normal görünmeleri için ters çevrilmeleri gerekecek.
Boyutlar statik değilse konumlandırma metni sıkıcı olacaktır.

Yöntem 5 - CSS Klip Yolu

( Tarayıcı Uyumluluğu )

Bu yöntemde, ana kap, bir çokgen kullanılarak istenen şekle kırpılır. Poligonun noktaları, eğimli kenarın gerekli olduğu tarafa bağlı olarak değiştirilmelidir.

Kod parçacığını göster

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

Snippet'i genişlet

Artıları

Kapsayıcı dinamik olarak yeniden boyutlandırılırken bile şekil korunabilir.
Fareyle üzerine gelme efekti, şeklin sınırları içinde mükemmel şekilde sınırlandırılacaktır.
Resim, şekil için arka plan olarak da kullanılabilir.

Eksileri

Tarayıcı desteği şu anda çok zayıf.
Şeklin üstüne kesinlikle konumlandırılmış bir eleman yerleştirilerek ve ona gerekli klibi verilerek sınırlar eklenebilir, ancak bir noktanın ötesinde dinamik olarak yeniden boyutlandırılırken iyi uymaz.

Yöntem 6 - Tuval

( Tarayıcı Uyumluluğu )

Kanvas, yolları çizerek şekli oluşturmak için de kullanılabilir. Aşağıdaki kod parçasının bir demosu var. Gerekli herhangi bir metin içeriği şeklin üstüne yerleştirilebilir.

Kod parçacığını göster

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>

Snippet'i genişlet

Artıları

Kabın boyutları dinamik olsa bile şekil elde edilebilir ve korunabilir. Kenarlıklar da eklenebilir.
Fareyle üzerine gelme efekti, pointInpathyöntem kullanılarak şeklin sınırları dahilinde sınırlandırılabilir .
Şekle görüntü veya gradyan arka planı da sağlanabilir.
DOM manipülasyonu gerektirmediğinden gerçek zamanlı animasyon efektlerine ihtiyaç duyulursa daha iyi bir seçimdir.

Eksileri

Tuval raster tabanlıdır ve bu nedenle, bir noktanın ötesine ölçeklendiğinde açılı kenarlar pikselleşir veya bulanıklaşır ^* .

^{* - Görüntü alanı yeniden boyutlandırıldığında pikselleşmeden kaçınmak için şeklin yeniden boyanması gerekir. Burada bir örneği var ama bu bir ek yük.}

Question 3

Border yöntemini kullanmayı denedim ama şeklimin boyutları dinamik ve bu yüzden bu yöntemi kullanamıyorum.

Yöntem 7 - Görüntü Alanı Birimleri ^{(Kenarlık Redux )}

( Tarayıcı Uyumluluğu )

Viewport Units , CSS3'te büyük bir yeniliktir. Özelliklerinizi dinamikleştirmek için genellikle yüzde değerlerini kullanabilirsiniz, ancak bunu border-widths ( veya font-sizes ) için yapamazsınız .

Bunun yerine Viewport Units ile nesnelerinizin boyutları ile birlikte çerçeve genişliklerinizi görünüm alanı boyutuna göre dinamik olarak ayarlayabilirsiniz .

_{Not: yüzde değerleri, görünüm alanına (pencerenin görünür alanı) değil, ana nesneye atıfta bulunur.}

Yöntemi test etmek için, aşağıdaki kod parçacığı Tam Sayfayı başlatın ve hem yatay hem de dikey olarak yeniden boyutlandırın.

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

Snippet'i genişlet

Artıları - (1) Her şey dinamiktir, tarayıcı kapsamı geniştir.

Dezavantajları - (1) En dikkat etmelidir OS kaydırma çubuğunu nasıl işleyeceğini ile overflow: auto;.

Question 4

Benim çözümüm , bu sayfanın yukarısında bulunan Andrea Ligios'un Yöntem 7 - Görüntü Alanı Birimleri adlı çözümden esinlenmiştir .

height:10vwGezinme penceresinin genişliğini yeniden boyutlandırırken yamukta verilen oranları korumak için yükseklik için de "yatay" birimi ( ) kullandım. Bu Yöntem 7b - Görüntü Alanı Genişliği diyebiliriz .

Ayrıca, divbir ve :afterseçici yerine iki iç içe geçmiş s kullanılması, bana göre metin içerik stillerinin daha iyi ayarlanmasını sağlar (örn. text-align, Vb.).

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

Snippet'i genişlet

Eğimli bir tarafla şekil verin (duyarlı)

Yöntem 1 - SVG

Yöntem 2 - Gradyan Arka Planı

Yöntem 3 - Eğriltme Dönüşümleri

Yöntem 4 - Perspektif Dönüşümleri

Yöntem 5 - CSS Klip Yolu

Yöntem 6 - Tuval

Yöntem 7 - Görüntü Alanı Birimleri (Kenarlık Redux )

Yöntem 7 - Görüntü Alanı Birimleri ^{(Kenarlık Redux )}