如何在html中绘制一侧弯曲的矩形[重复]答案

【问题标题】：How to draw rectangle with one side curved in html [duplicate]如何在html中绘制一侧弯曲的矩形[重复]
【发布时间】：2016-11-26 00:00:13
【问题描述】：

是否可以在 html 中绘制顶部弯曲的矩形？形状应显示在 html 页面的底部，因为它需要页脚。

【问题讨论】：

这个形状的预期用途是什么？简单的选项通常只是使用具有透明度的图像，但这取决于您使用它的目的。（例如，它是纯粹的图形，还是你需要在里面放东西？）我可能会使用图像作为页脚形状。
你可以在前一个元素上使用border-radius codepen.io/anon/pen/NbgVZm
Download Inkscape 玩一玩。您的形状在 svg 中实现应该完全没有问题。

标签： css html svg

【解决方案1】：

您可以使用 SVG 作为分隔符。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 3;
  background-color: purple;
  fill: purple;  /* Color svg separator will inherit from */
  position: relative;
}
svg {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 100%;
  fill: inherit;
}
footer {
  flex: 1;
  padding-top: 50px;  /* svg separator height */
  background-color: gold;
}

<main>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 0 C 50 100 50 100 100 0 Z"></path>
  </svg>
</main>
<footer></footer>

【讨论】：

【解决方案2】：

试试这个：这应该只显示第一步:-)

.wrapper {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  border-top: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.wrapper:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 80%;
  border: 1px solid black;
  left: 0;
  top: -50%;
  z-index: 2;
}

您可以使用 top(%) 和半径来满足您的需求他是小提琴：https://jsfiddle.net/tbm2jgbk/

【讨论】：

谢谢，是否可以将剩余部分（即形状部分除外）渲染为透明？ .wrapper:before 背景颜色为透明而不被 .wrapper 背景颜色填充
当然，但我的背景透明不会改变很多，而不是使用 background-color:white （或任何你的背景）作为 .wrapper:before （hier:jsfiddle.net/tbm2jgbk/1）跨度>