主页 / 问题 / 1425038
Accepted
Siparat
Asked:2022-08-29 18:03:22 +0000 UTC2022-08-29 18:03:22 +0000 UTC

这条线怎么画？

  • 772

在此处输入图像描述

告诉我如何为屏幕的整个宽度制作一条曲线

javascript html

2 个回答

  1. 例子

    body {
  margin: 0;
  padding: 1.5rem 0;
}

.line {
  height: 2rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.line::after {
  content: '';
  width: 120vw;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 50%;
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
  box-sizing: border-box;
}
    <div class="line"></div>

    • 4
  2. Best Answer

    SVG 解决方案选项

    在我看来，这种方案比较简单，没有CSS方案的缺点（视口调整大小时曲线的半径会发生变化）

    .container {
width:100vw;
height:100vh;
}
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 865 442" >
    <path d="M41 247s189-45 399-45c174 0 392 44 392 44" fill="none" stroke="grey"/>
</svg>
</div>

    • 1

相关问题