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

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

기울어 진면이있는 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>


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

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



답변

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

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

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

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


방법 1-SVG

( 브라우저 호환성 )

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

장점

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

단점

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

방법 2-그라데이션 배경

( 브라우저 호환성 )

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

장점

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

단점

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

방법 3-왜곡 변환

( 브라우저 호환성 )

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

장점

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

단점

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

방법 4-원근 변환

( 브라우저 호환성 )

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

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

장점

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

단점

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

방법 5-CSS 클립 경로

( 브라우저 호환성 )

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

장점

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

단점

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

방법 6-캔버스

( 브라우저 호환성 )

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

장점

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

단점

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

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


답변

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


방법 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;.


답변

내 솔루션 은 이 페이지 위에있는 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>


답변