CSS에서 경 사진 상자를 만드는 방법은 무엇입니까?

CSS에서 경사진 상자

CSS에서 경사진 모서리가 있는 상자를 만드는 것은 일반적인 요구 사항입니다. 이 효과를 얻기의 어려움은 베벨의 크기에 따라 다릅니다.

더 작은 경사의 경우 box-shadow 속성을 사용할 수 있습니다. 더 큰 베벨의 경우 더 복잡한 기술이 필요합니다.

CSS 다각형 사용

CSS3에서는 다각형 속성이 도입되어 경사를 훨씬 쉽게 만들 수 있습니다. 다각형을 사용하면 경사가 포함된 사용자 정의 모양을 지정할 수 있습니다.

<code class="css">.cornered {
  width: 160px;
  height: 160px;
  background-color: red;
  clip-path: polygon(0 0, 0 40px, 40px 80px, 80px 0);
}</code>

투명 테두리 사용

또 다른 방법은 투명 테두리를 사용하는 것입니다. 배경색이 있는 컨테이너 내에 투명한 테두리를 배치하여 경사진 효과를 만들 수 있습니다.

<code class="css">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid transparent;
}

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

이 방법은 작은 경사를 만드는 데 유용하며 특히 텍스트 작업 시 유용합니다.

타사 라이브러리 사용

비스듬한 모서리가 있는 상자를 만드는 데 사용할 수 있는 타사 라이브러리도 많이 있습니다. 이러한 라이브러리는 CSS를 직접 작성하지 않고도 이 효과를 얻을 수 있는 편리한 방법을 제공합니다.

인기 있는 라이브러리는 다음과 같습니다.

• [Slantastic](https://meyerweb.com/eric/css/edge/slantastic/)
• [Trianglify ] (https://github.com/qrohlf/trianglify)
• [폴리곤](https://github.com/polygonjs/polygon.js)

위 내용은 CSS에서 경 사진 상자를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!