如何在html中绘制一侧弯曲的矩形 [英] How to draw rectangle with one side curved in html

问题描述

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

Is it possible to draw rectangle with top side curved in html? Shape should be shown on bottom of the html page as it requires for footer.

推荐答案

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

try this: this should show the first steps only :-)

.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(%) 和半径来满足您的需要hier 是小提琴:https://jsfiddle.net/tbm2jgbk/

you can play around with top(%) and the radius to fit your needs hier is the fiddle: https://jsfiddle.net/tbm2jgbk/

这篇关于如何在html中绘制一侧弯曲的矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！