使用CSS曲线绘制矩形的长度？

Question

是否可以使用CSS制作此形状？它不能用边界半径完成，是否有另一种方法可以弯曲＆＃39;一个长方形的边？

Answer 1

正如其他答案所说，使形状完美的最佳方法是使用SVG。然而，在css3和伪元素的帮助之后你可能会有很接近的形状。

这个很不好，因为我已经将 FIDDLE 作为一个快速的例子，但随着时间的推移你可能会得到更好的结果：

div {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: green;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
div:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}
div:after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: -11px;
    width: 130px;
  height: 120px;
  background: green;
  border-radius: 20% / 150%;        
}

Answer 2

我认为没有任何广泛使用纯css构建形状的方法。

你可以尝试使用内联svg：

background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");

这只是一个例子svg，你必须建立自己的模型。它也接受base 64：

background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTM2NiwzMTAgTDU2NiwxNjAgNDY2LDExMCAxNjYsNjAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0zNjYsMzEwIEw1NjYsMTYwIDQ2NiwxMTAgMTY2LDYwIHoiICAvPgo8L3N2Zz4=) no-repeat;

编辑：我创造了一个小提琴：https://jsfiddle.net/pm3czdhj/7/ 您也可以尝试查看css属性clip-path。

Answer 3

像这样的一些CSS会使矩形具有弯曲的边缘：

div {
border: 2px solid;
border-radius: 25px;
}