主页 / 问题 / 1483707
Accepted
DiMithras
Asked:2023-01-05 08:53:56 +0000 UTC2023-01-05 08:53:56 +0000 UTC

如何以窗帘的形式制作弯曲的水平线（ᴗᴗᴗᴗᴗ）

  • 772

问题

如何制作由水平排列的半圆组成的窗帘形式的分界线？
有没有不使用JS的优雅解决方案？

尝试了什么：

选项1

从问题的标题来看，很明显，使其成为文本的最简单方法是使用Latin Small Letter Bottom Half O。
但是，由于这样的窗帘意味着图形元素，而不是文本，所以这不是一个很好的解决方案。我们仍然不能<hr>在页面查看时选择。

<div>ᴗᴗᴗᴗᴗ</div>

但是这种方式可以区分，这对于图形元素来说是不可取的，并且会惹恼SEO。

选项 2

有了这个选项，事情就更精彩了，使用了 CSS，但是如果你需要在窗帘中制作 20+ 个圆圈，那么 html 标记看起来很糟糕，因为。同一个<div>重复了很多次。

 .circle {
    width: 20px;
    height: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 3px solid black;
    border-top: 0;
    float: left;
}
<div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

其他

当然，您可以使用图像，但是这样一个简单的元素太多了。
我也看文体<hr>的方向，但是在里面不能超越一条直线。你可以弯曲它，但这已经在使用 JS 了。

html

1 个回答

  1. Best Answer

    这种图形设计的本质是一种可以使用渐变轻松绘制的图案：

    .curtain {
  height: 10px;
  border: none;
  background: radial-gradient(circle at top center, #0000 0 calc(50% - 5px), #000 calc(50% - 4px) calc(50% - 2px), #0000 calc(50% - 1px)) repeat-x 50% 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(to right, #0000, #000 15px calc(100% - 15px), #0000);
  mask-image: linear-gradient(to right, #0000, #000 15px calc(100% - 15px), #0000);
}
    <hr class="curtain">

    • 4

相关问题