个人中心
gpt4 book ai didi

html - 使垂直边框呈波浪形

转载 作者：行者123 更新时间：2023-12-05 01:49:15 28 4
gpt4 key购买 nike

我正在尝试找到一种方法来插入 flex 的(或者更好的是波浪形的)垂直条。我找到了 nice bubble pattern我正在尝试复制。我遇到的问题是我不知道如何将它旋转 90 度以使其成为列边框。我发现的其他问题是关于水平波浪边框的。我正在寻找垂直的。

此示例显示了我想要完成的水平示例。

.bubble::after {
  content: '';
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 100%;
  background-color: #0f0f10;
  height: 85%;
}
<section class="bubble">

</section>

我的模板是这样的:

<html>
<head></head>
<body>
    <aside>
    Side bar navigation menu here
    </aside>
    <main>
    Main content here
    </main>
</body>
</html>

看起来像这样: Sample two column example

我希望两列之间的边界是“波浪形的”。我如何仅使用 CSS 来完成此操作？

最佳答案

我自己曾使用 clip-path 创建这样的波浪边框。我从 this clip-path generator 得到了剪辑路径

我的方法的解释

使用我上面列出的工具，你可以改变波浪的各个方面，深度和高度等。我在网上找到的所有波浪都是水平的，但你可以通过添加 来简单地解决这个问题transform: rotate(90deg) 在那里，这使它垂直!如果您想添加向右波浪的波浪，只需将其旋转 -90 度即可。

额外注意，确保 :before 的宽度和高度是正方形，因此它与它所在的列完美对齐，before 的宽度和高度必须是您正在尝试的列的高度附加到它，使其完美融合。

.bubble {
  display: flex;
}

.column-2::before {
  content: '';
  transform: rotate(90deg);
clip-path: polygon(100% 0%, 0% 0% , 0% 57.50%, 1% 57.49%, 2% 57.47%, 3% 57.42%, 4% 57.36%, 5% 57.29%, 6% 57.20%, 7% 57.09%, 8% 56.96%, 9% 56.82%, 10% 56.67%, 11% 56.49%, 12% 56.31%, 13% 56.11%, 14% 55.89%, 15% 55.67%, 16% 55.43%, 17% 55.17%, 18% 54.91%, 19% 54.63%, 20% 54.35%, 21% 54.05%, 22% 53.75%, 23% 53.43%, 24% 53.11%, 25% 52.78%, 26% 52.45%, 27% 52.11%, 28% 51.76%, 29% 51.42%, 30% 51.06%, 31% 50.71%, 32% 50.35%, 33% 50.00%, 34% 49.64%, 35% 49.28%, 36% 48.93%, 37% 48.58%, 38% 48.23%, 39% 47.88%, 40% 47.54%, 41% 47.21%, 42% 46.88%, 43% 46.56%, 44% 46.24%, 45% 45.94%, 46% 45.64%, 47% 45.36%, 48% 45.08%, 49% 44.82%, 50% 44.57%, 51% 44.33%, 52% 44.10%, 53% 43.89%, 54% 43.69%, 55% 43.50%, 56% 43.33%, 57% 43.17%, 58% 43.03%, 59% 42.91%, 60% 42.80%, 61% 42.71%, 62% 42.63%, 63% 42.58%, 64% 42.53%, 65% 42.51%, 66% 42.50%, 67% 42.51%, 68% 42.53%, 69% 42.58%, 70% 42.64%, 71% 42.71%, 72% 42.81%, 73% 42.92%, 74% 43.04%, 75% 43.18%, 76% 43.34%, 77% 43.51%, 78% 43.70%, 79% 43.90%, 80% 44.11%, 81% 44.34%, 82% 44.58%, 83% 44.83%, 84% 45.10%, 85% 45.37%, 86% 45.66%, 87% 45.96%, 88% 46.26%, 89% 46.57%, 90% 46.90%, 91% 47.22%, 92% 47.56%, 93% 47.90%, 94% 48.24%, 95% 48.59%, 96% 48.95%, 97% 49.30%, 98% 49.66%, 99% 50.01%, 100% 50.37%);
  position: absolute;
  left: -325px;
  top: 0;
  z-index: -1;
  width: 500px;
  background-color: firebrick;
  height: 500px
}

.column-1,
.column-2 {
  width: 50%;
  height: 500px;
}

.column-2 {
  background-color: firebrick;
  position: relative;
}
<section class="bubble">
  <div class="column-1">
    <h1>Column 1</h1>
  </div>
  <div class="column-2">
    <h1>Column 2</h1>
  </div>
</section>

希望这是您正在寻找的东西，并且对您有所帮助!

关于html - 使垂直边框呈波浪形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74320978/

28 4 0
文章推荐： julia - Julia 中对称矩阵的快速求和
文章推荐： excel - 在 Excel 中分隔数字和文本
文章推荐： python - 在此示例中，我可以将列表的索引值设置为不断变化的变量吗？
文章推荐： sql - 如何使用每个字段的最大时间戳交叉连接同一个表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com