측면이 기울어 진 모양 (반응 형)

Question 1

아래 이미지와 같이 한쪽 (예 : 아래쪽) 에만 기울어 진 가장자리 를 사용하고 다른 가장자리는 똑바로 유지 하는 모양을 만들려고합니다 .

기울어 진면이있는 CSS div

테두리 방법 (코드는 아래에 나와 있음)을 사용해 보았지만 모양의 치수가 동적이므로이 방법을 사용할 수 없습니다.

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

스 니펫 확장

나는 또한 (아래 코드와 같이) 배경에 그라디언트를 사용하려고 시도했지만 치수가 변경되면 엉망이됩니다. 아래 스 니펫에서 모양에 마우스를 가져 가면 내가 의미하는 바를 알 수 있습니다.

코드 스 니펫 표시

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

스 니펫 확장

경사면 이있는이 모양을 만들고 동적 크기 를 지원할 수 있는 방법은 무엇입니까?

Question 2

한쪽에만 기울어 진 모서리가있는 모양을 만드는 방법에는 여러 가지가 있습니다.

다음 방법은 질문에서 이미 언급 한 동적 크기를 지원할 수 없습니다.

에 대한 픽셀 값이있는 테두리 삼각형 방법 border-width.
각도 구문 (45deg, 30deg 등)을 사용하는 선형 그래디언트.

동적 크기를 지원할 수있는 방법은 아래에 설명되어 있습니다.

방법 1-SVG

( 브라우저 호환성 )

SVG는 polygons 또는 paths 를 사용하여 모양을 생성하는 데 사용할 수 있습니다 . 아래 스 니펫은 polygon. 필요한 모든 텍스트 콘텐츠는 도형 위에 배치 할 수 있습니다.

코드 스 니펫 표시

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

스 니펫 확장

장점

SVG는 확장 가능한 그래픽을 생성하도록 설계되었으며 모든 치수 변경에 잘 작동 할 수 있습니다.
최소한의 코딩 오버 헤드로 테두리와 호버 효과를 얻을 수 있습니다.
이미지 또는 그라데이션 배경도 도형에 제공 할 수 있습니다.

단점

IE8은 SVG를 지원하지 않지만 Raphael 및 VML과 같은 라이브러리를 사용하여 완화 할 수 있기 때문에 브라우저 지원이 유일한 단점 일 수 있습니다. 또한 브라우저 지원은 다른 옵션보다 나쁘지 않습니다.

방법 2-그라데이션 배경

( 브라우저 호환성 )

선형 그래디언트는 여전히 모양을 생성하는 데 사용할 수 있지만 질문에서 언급 한 각도로는 사용할 수 없습니다. 각도를 지정하는 대신 to [side] [side]구문 ( vals 덕분에 ) 을 사용해야합니다 . 측면을 지정하면 컨테이너의 크기에 따라 그라데이션 각도가 자동으로 조정됩니다.

코드 스 니펫 표시

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

스 니펫 확장

장점

용기의 크기가 동적 인 경우에도 모양을 달성하고 유지할 수 있습니다.
그라디언트 색상을 변경하여 호버 효과를 추가 할 수 있습니다.

단점

커서가 모양 밖에 있지만 컨테이너 안에있을 때도 호버 효과가 트리거됩니다.
테두리를 추가하려면 까다로운 그라디언트 조작이 필요합니다.
그라디언트는 너비 (또는 높이)가 매우 클 때 들쭉날쭉 한 모서리를 생성하는 것으로 알려져 있습니다.
모양에 이미지 배경을 사용할 수 없습니다.

방법 3-왜곡 변환

( 브라우저 호환성 )

이 방법에서는 모서리 중 하나가 기울어 지거나 기울어 진 것처럼 보이는 방식으로 유사 요소가 추가되고 기울어지고 배치됩니다. 위쪽 또는 아래쪽 가장자리가 기울어 진 경우 기울어 진 부분은 Y 축을 따라야합니다. 회전은 X 축을 따라야합니다. transform-origin경사면과 반대쪽 이 있어야합니다.

코드 스 니펫 표시

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

스 니펫 확장

장점

테두리로도 모양을 얻을 수 있습니다.
호버 효과는 모양 내로 제한됩니다.

단점

요소가 기울어지면 Y 축의 오프셋이 증가함에 따라 width증가하고 그 반대의 경우도 마찬가지 이므로 모양을 유지하려면 치수를 비례 적으로 증가시켜야 합니다 (스 니펫 에서 widthto 증가 시도 200px). 여기에서 이에 대한 자세한 정보를 찾을 수 있습니다 .

방법 4-원근 변환

( 브라우저 호환성 )

이 방법에서는 주 컨테이너가 약간의 원근감으로 X 또는 Y 축을 따라 회전합니다. 적절한 값을로 설정하면 transform-origin한쪽에만 경사 모서리가 생성됩니다.

위쪽 또는 아래쪽이 기울어 진 경우 회전은 Y 축을 따라야하고 그렇지 않으면 회전은 X 축을 따라야합니다. transform-origin경사면과 반대쪽 이 있어야합니다.

코드 스 니펫 표시

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

스 니펫 확장

장점

테두리로 모양을 얻을 수 있습니다.
모양을 유지하기 위해 치수를 비례 적으로 늘릴 필요는 없습니다.

단점

콘텐츠도 회전되므로 정상적으로 보이려면 반대 방향으로 회전해야합니다.
치수가 고정되어 있지 않으면 텍스트 위치 지정이 지루합니다.

방법 5-CSS 클립 경로

( 브라우저 호환성 )

이 방법에서는 기본 컨테이너가 다각형을 사용하여 필요한 모양으로 잘립니다. 기울어 진 모서리가 필요한면에 따라 다각형의 점을 수정해야합니다.

코드 스 니펫 표시

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

스 니펫 확장

장점

컨테이너의 크기가 동적으로 조정되는 경우에도 모양을 유지할 수 있습니다.
호버 효과는 모양의 테두리 내에서 완벽하게 제한됩니다.
이미지를 도형의 배경으로 사용할 수도 있습니다.

단점

현재 브라우저 지원은 매우 열악합니다.
테두리는 모양 위에 절대 위치 요소를 배치하고 필요한 클립을 제공하여 추가 할 수 있지만 동적 크기 조정시에는 잘 맞지 않습니다.

방법 6-캔버스

( 브라우저 호환성 )

캔버스를 사용하여 경로를 그려 모양을 만들 수도 있습니다. 아래 스 니펫에는 데모가 있습니다. 필요한 모든 텍스트 콘텐츠는 도형 위에 배치 할 수 있습니다.

코드 스 니펫 표시

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>

스 니펫 확장

장점

용기의 크기가 동적 인 경우에도 모양을 달성하고 유지할 수 있습니다. 테두리를 추가 할 수도 있습니다.
호버 효과는 pointInpath방법 을 사용하여 모양의 경계 내로 제한 할 수 있습니다 .
이미지 또는 그라데이션 배경도 도형에 제공 할 수 있습니다.
DOM 조작이 필요하지 않으므로 실시간 애니메이션 효과가 필요한 경우 더 나은 선택입니다.

단점

캔버스는 래스터 기반이므로 각진 가장자리는 포인트 ^* 이상으로 크기가 조정될 때 픽셀 화되거나 흐려 집니다.

^{*-픽셀 화를 방지하려면 뷰포트 크기를 조정할 때마다 모양을 다시 그려야합니다. 거기의 예입니다 여기는 하지만 오버 헤드입니다.}

Question 3

테두리 방법을 사용해 보았지만 모양의 치수가 동적이므로이 방법을 사용할 수 없습니다.

방법 7-뷰포트 단위 ^{(테두리 Redux )}

( 브라우저 호환성 )

뷰포트 유닛 은 CSS3의 큰 혁신입니다. 일반적으로 백분율 값을 사용하여 속성을 동적화할 수 있지만 border-widths ( 또는 font-sizes )에 .

대신 뷰포트 단위를 사용하면 뷰포트 크기와 비교하여 개체 크기와 함께 테두리 너비를 동적으로 설정할 수 있습니다 .

_{참고 : 백분율 값은 뷰포트 (창의 보이는 영역)가 아닌 상위 오브젝트를 참조합니다.}

메서드를 테스트하려면 다음 스 니펫 전체 페이지를 시작하고 가로 및 세로 모두 크기를 조정합니다.

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

스 니펫 확장

장점 -(1) 모든 것이 동적이며 브라우저 범위가 넓습니다.

단점 - (1) 당신은에주의를 기울여야한다 당신의 OS가 스크롤 처리하는 방법 과를 overflow: auto;.

Question 4

내 솔루션 은 이 페이지 위에있는 Andrea Ligios의 Method 7-Viewport Units 에서 영감을 받았습니다 .

height:10vw내비게이션 창의 너비를 조정할 때 사다리꼴로 주어진 비율을 유지하기 위해 높이에도 "수평"단위를 사용했습니다 ( ). 이것을 Method 7b-Viewport Width 라고 부를 수 있습니다.

또한 div하나와 :after선택기 대신 두 개의 중첩 된를 사용 하면 텍스트 콘텐츠 스타일을 더 잘 조정할 수 있습니다 (예 : text-align등).

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

스 니펫 확장

측면이 기울어 진 모양 (반응 형)

방법 1-SVG

방법 2-그라데이션 배경

방법 3-왜곡 변환

방법 4-원근 변환

방법 5-CSS 클립 경로

방법 6-캔버스

방법 7-뷰포트 단위 (테두리 Redux )

방법 7-뷰포트 단위 ^{(테두리 Redux )}