如何在 CSS 中使用单个元素创建具有内部圆形边框的倾斜元素？-css教程-PHP中文网

如何在 CSS 中使用单个元素创建具有内部圆形边框的倾斜元素？

Linda Hamilton

发布： 2024-10-31 04:55:02

原创

376 人浏览过

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>

登录后复制

在此方法中：