CSS의 단일 요소를 사용하여 내부 둥근 테두리가 있는 기울어진 요소를 만드는 방법은 무엇입니까?

CSS 요소 기울이기 및 내부 둥근 테두리 상단 달성

CSS에서 그래픽 디자인을 복제하면서 반응형 디자인을 달성하는 것은 특히 다음과 같은 경우 어려울 수 있습니다. 비뚤어진 모양 및 내부 둥근 테두리와 같은 요소를 처리합니다. 이 기사에서는 사용자가 -40도의 기울어짐과 열쇠 모양의 버튼처럼 요소를 둘러싸는 내부 둥근 테두리가 있는 요소를 생성하려고 하는 특정 문제를 다룰 것입니다.

원본 HTML 및 CSS

제공된 HTML은 간단한

요소:

<code class="html"><header>
  <nav></nav>
</header></code>

해당 CSS에는 다음이 포함됩니다.

<code class="css">body > header > nav {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100vw;
  height: 90px;
  padding: 10px 0;
  text-align: center;
  z-index: 1
}
body > header > nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80vw; height: 100%;
  background-color: rgb(147, 147, 147);
  border-bottom-right-radius: 15px;
  transform: skew(-40deg);
  transform-origin: 100% 0%;
}
body > header > nav::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28.7%;
  border-top: 7px solid rgb(147, 147, 147);
  border-left: 50px solid rgb(147, 147, 147);
  height: 75px;
  border-top-left-radius: 75px;
  transform: skew(-33deg);
}</code>

이 접근 방식은 두 가지 요소를 사용하여 기울어진 모양과 내부 테두리를 시뮬레이션합니다. 그러나 사용자는 여러 요소가 필요하지 않은 보다 간단한 솔루션을 찾고 있습니다.

단일 요소를 사용한 대체 접근 방식

더 깔끔하고 반응성이 뛰어난 디자인을 달성하려면, 다음 HTML 및 CSS를 사용하여 단일 요소를 활용할 수 있습니다.

<code class="html"><div class="header"></div></code>

<code class="css">.header {
  border-top: 20px solid blue;
  height:100px;
  position: relative;
  overflow: hidden;
}

.header:before,
.header:after {
  content: "";
  vertical-align:top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}

.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}

.header:after {
  height: 20px;
  width: 20px;
  margin-left:-1px;
  background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

이 접근 방식에서는:

• .header 요소는 파란색 문자가 있는 단일 요소 역할을 합니다. 실선 상단 테두리, 높이 100px, 상대 위치 지정.
• :before 및 :after 의사 요소는 각각 기울어진 모양과 내부 둥근 테두리를 만듭니다.
• 기울이기 변환은 다음에 적용됩니다. 두 의사 요소 모두.
• :before 의사 요소는 오른쪽 하단 테두리 반경이 20px인 기본 파란색의 기울어진 모양을 형성합니다.
• :after 의사 요소는 내부 요소를 생성합니다. 둥근 테두리는 원활한 전환을 위해 약간 왼쪽에 위치합니다.

이 방법을 사용하면 요소가 뷰포트에 맞게 크기와 모양을 자동으로 조정할 수 있으므로 반응형 디자인이 가능합니다. 또한 :after 의사 요소에 그라데이션 배경을 사용하면 부드러운 내부 테두리 효과가 생성됩니다.

위 내용은 CSS의 단일 요소를 사용하여 내부 둥근 테두리가 있는 기울어진 요소를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!