CSS에서 내부 둥근 테두리가 있는 기울어진 요소를 만드는 방법은 무엇입니까?

내부 둥근 테두리로 요소 기울이기

CSS를 사용하여 그래픽 디자인을 복제하려고 합니다. 내부 둥근 테두리. 두 가지 요소를 사용하여 정적 버전을 구현했지만 반응형으로 만드는 데 어려움을 겪고 있습니다.

이 효과를 만들려면 단일 요소를 활용해 보겠습니다.

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

그런 다음 :before 및 :after 의사 요소를 추가하여 기울어진 모양을 만듭니다.

<code class="css">.header:before,
.header:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}</code>

내부 둥근 테두리의 스타일을 지정하려면 :before 의사 요소를 조정합니다.

<code class="css">.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}</code>

마지막으로 , 내부 둥근 모서리의 오른쪽 하단에 그라데이션을 추가합니다.

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

이 접근 방식은 두 요소의 기능을 단일 요소로 결합하여 더 쉽게 반응할 수 있도록 합니다.

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