CSS 상자에 기울어진 모서리 만들기

CSS 상자에 기울어진 모서리를 만드는 것은 다양한 방법을 사용하여 수행할 수 있습니다. 한 가지 접근 방식은 아래에 설명되어 있습니다.

테두리를 사용하는 방법

이 기술은 컨테이너 왼쪽을 따라 투명한 테두리를 만들고 아래쪽을 따라 기울어진 테두리를 만드는 데 의존합니다. . 다음 코드는 이를 구현하는 방법을 보여줍니다.

Hello World

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

이렇게 하면 왼쪽 상단 모서리가 45도 각도로 기울어진 상자가 생성됩니다.

투명도를 사용하는 대체 방법

To 기울어진 부분 내에 텍스트를 허용하면 추가 투명 테두리를 사용할 수 있습니다. 아래 수정된 코드는 이 접근 방식을 보여줍니다.

  
It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.
  
Hello hello hello hello
hello hello hello hello hello

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

이 메서드는 길이를 따라 텍스트를 표시할 수 있는 기울어진 테두리를 만듭니다.