CSS만 사용하여 CSS에서 반전된 스쿠프 모서리를 어떻게 만들 수 있습니까?

순수한 CSS를 사용하여 뒤집힌 모서리 만들기

CSS에서는 border-radius 속성을 사용하여 둥근 모서리를 만드는 것이 간단합니다. 그러나 모서리가 안쪽으로 휘어지는 거꾸로 된 스쿠프 모서리를 만들려면 더 고급 기술이 필요합니다.

역전된 스쿠핑 모서리를 만들려면 다음 접근 방식을 사용합니다.

• 오버플로가 숨겨진 투명한 사각형.
• 사각형 내부에 상자 그림자가 있는 투명한 원을 배치합니다.
• 원의 4분의 1만 보이도록 원의 위치를 ​​조정합니다.

코드 구현

#box {
  position: relative;
  width: 200px;
  height: 50px;
  background-color: blue;
  border-radius: 9999px 0 0 9999px;
  margin: 30px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}

#top,
#bottom {
  position: absolute;
  height: 30px;
  width: 30px;
  right: 0;
  overflow: hidden;
}

#top {
  top: -30px;
}

#bottom {
  bottom: -30px;
}

#top::before,
#bottom::before {
  content: '';
  position: absolute;
  right: 0;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px blue;
  z-index: -1;
}

#top::before {
  top: -100%;
}

위 내용은 CSS만 사용하여 CSS에서 반전된 스쿠프 모서리를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!