Question

我想知道是否有一种方法可以使用[此形状] [1]（任何CSS解决方案，3D）。我尝试使用border-radius但你不能有负值。

感谢。

修改

我很抱歉缺乏信息，但我是一块，而不是边界（图像不好，我的坏）。实际上它是一个功能区，我希望它有点弯曲，如this one，因为我必须在其中写入文字，它不能是边框。

如果它可以在CSS中使用而不是Canvas / SVG，那将会很棒。

再次感谢。

修改完成！更多详情：http://forrst.com/posts/CSS3_Curved_Ribbon-IyB

Answer 1

http://jsfiddle.net/efortis/E6SRf/1

<div class="clipper">
  <div class="shape"> </div> 
</div>

.shape{
 border-radius: 600px;
 width: 600px;
 height: 600px;
 border: 4px solid black;
}

.clipper {
 width: 610px;
 height: 150px;
 overflow:hidden;
}

Answer 2

直接从this site复制：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var centerX = 288;
var centerY = 160;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();

这会产生this arc。

Answer 3

这里还有一个使用:after伪元素。与other CSS answer相同的剪辑思路，只是隐藏溢出，因此边框看起来不那么圆。

标记：

<div></div>

CSS：

div:after {
    content:" ";
    height:80px;
    display:block;
    width:160px;
    border-radius:80px 80px 0 0;
    border:2px solid #000;   
    border-bottom:0;
}

div {
    height:40px;
    overflow:hidden;
}

演示：http://jsfiddle.net/Cbm7n/1/

CSS3中的曲线块

3 个答案: