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

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

Linda Hamilton

풀어 주다： 2024-10-31 04:55:02

원래의

374명이 탐색했습니다.

How to Create a Skewed Element with an Inner Rounded Border Using a Single Element in 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>

로그인 후 복사

이 접근 방식에서는: