如何在 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中文網其他相關文章！