制作一侧弯曲的矩形

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

试试这个来制作 'div' 元素：

<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>

Answer 3

这可以在 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>

制作一侧弯曲的矩形

Make rectangle with one side curved

html

css

css-shapes