制作一边弯曲的矩形

Question

是否可以使div与此形状相同，如果是，请分享代码

Answer 1

我会使用SVG：http://codepen.io/anon/pen/JdMVXY

<svg>
  <path d="M260 150, 0 150, 0 0, 300 0 Q260 75, 260 150" 
        stroke="transparent" fill="#bd9" />
</svg>

当您定义了框的正确宽高比后，您还可以使用简单的CSS转换缩放SVG元素（如示例所示）

结果

Answer 2

这可以在CSS中使用pseudo-elements border-radius和background-shadow的单个元素来创建曲线。

div {
  height: 100px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  top: -150%;
  left: 50%;
  width: 200%;
  padding-bottom: 200%;
  border-radius: 100%;
  background: none;
  -webkit-box-shadow: 0px -10px 5px 300px #F15723;
  box-shadow: 0px -10px 5px 300px #F15723;
  z-index: -1;
}

<div></div>

Answer 3

尝试这样做以实现＆＃39; div＆＃39;元素：

<div id="test">
<div class="oposite-radius"></div>

<style>

#test {
position: relative;
margin: 30px;
width: 200px;
height: 100px;
border: 1px solid #333;
}

.oposite-radius {
    position: absolute;
    height: 100px;
    width: 20px;
    border: 1px solid #333;
    background-color: #fff;
    left: 180px;
    border-radius: 100% 0 0 0;
    border-width: 1px 0 0 1px;
}
</style>