Изогнутый блок в CSS3

Question

Мне было интересно, есть ли способ иметь блок с [этой формой] [1] (любое решение CSS, тоже 3D).Я пробовал с border-radius, но вы не можете иметь отрицательные значения.

Спасибо.

РЕДАКТИРОВАТЬ:

Извините за отсутствиеинформации, но я лежу блок, а не границы (изображение не было хорошим, мое плохое).На самом деле это для ленты, я бы хотел, чтобы она была немного изогнутой, как эта , и, поскольку я должен написать на ней текст, она не может быть границей.

И было бы здорово, если бы это было выполнимо в 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

Вот еще один пример использования псевдоэлемента :after. Та же идея отсечения, что и у другого ответа CSS , просто скрывая переполнение, чтобы граница выглядела менее круглой.

Markup:

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

Answer 3

Непосредственное копирование с этого сайта :

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();

Это производит эту дугу .