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