为div创建边框半径

Question

我创建了div，其中我必须编写用于创建border-radius的css到div。所以我想border-radius应该像下面的图片。

的CSS代码，我已经写了什么如下。

{ 
      border-top-left-radius: 5px; 
      border-bottom-left-radius: 5px; 
      border-top-right-radius: 6% 60%; 
      border-bottom-right-radius: 6% 60%; 

      margin: 10px 0; 
      color: #FFFFFF; 
      background: -moz-linear-gradient(top, #2ea2f5 0%, #2ea2f5 50%, #0089f3 50%, #0089f3 100%); 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ea2f5), color-stop(50%,#2ea2f5), color-stop(50%,#0089f3), color-stop(100%,#0089f3)); 
      background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      background: -o-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      background: -ms-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      background: linear-gradient(to bottom, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ea2f5', endColorstr='#0089f3',GradientType=0); 
} 

即使你可以通过它jsfiddle.net

所以，请帮助我，我已经坚持了这个2天。

Answer 1

嗯，我设法做类似的东西，它应该是跨浏览器（后小编辑）支持：

http://jsbin.com/elubek/1/edit

CSS：

div.wrapper { 
    position: relative; 
    width: 450px; 
} 

div.tag { 
    width: 400px; 
    padding: 3px 10px; 
    height: 74px; 
    background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
    border-radius: 5px; 
    position: absolute; 
    top: 0; 
    z-index: 120; 
} 

div.box1 { 
    height: 62px; 
    width: 62px; 
    right: 0px; 
    top: 9px; 
    border-radius: 10px; 
    z-index: -1; 
    position: absolute; 
    -webkit-transform: rotate(-45deg); 
    background: -webkit-linear-gradient(top right, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
    float: right; 
} 

div.circle { 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    z-index: 5; 
    border-radius: 100px; 
    background: white; 
    right: 10; 
    top: 35px; 
} 

p { 
    font-family: 'Verdana'; 
    color: white; 
    margin: 0; 
} 

p.prgress-info { 
    font-size: 25px; 
    letter-spacing: -1px; 
    padding-top: 10px; 
} 

p.deadline { 
    padding-bottom: 19px; 
    font-size: 12px; 
    font-weight: normal; 
} 

p.deadline span { font-size: 14px; } 

HTML：

<div class='wrapper'> 
    <div class='tag'> 
     <p class="prgress-info">003. In progress</p> 
     <p class="deadline"><span>7</span>/ Deadline: 30 July 2013</p> 
    </div> 
    <div class='box1'></div> 
    <div class='circle'></div> 
    </div> 

你可以使用div.box1的the height/width来实现你想要的半径;）

Answer 2

border-radius确实允许一些复杂的形状，使用它的扩展语法。例如：

border-radius:15px 25px 25px 15px/15px 45px 45px 15px; 

请参阅http://jsfiddle.net/tDCaA/1/。它朝着你正在寻找的方向前进，但并未完全实现。

麻烦的是，进一步的调整并没有变得更加接近 - 用你在样本图像上得到的直线，你根本没有看到border-radius的效果;这是一个比border-radius设计的更复杂的形状。所以我的建议是在这里停止关注border-radius作为答案，并寻找替代方案。

那么还有什么替代方案？下面是一些你可以尝试：

• SVG图像。这个例子对于一个SVG图片来说是一个很好的例子，因为你已经有了一些小的设计元素，比如标签末尾的白洞，这在CSS中不容易实现。

• CSS三角形。使用具有CSS边框的旧三角形标记来绘制标记的结束部分。虽然你可能会遇到困难的角落。

• Rotation。创建第二个元素（可能使用CSS :after选择器），该元素将用作标记的最后一部分。然后使用CSS将其旋转45度以获得所需的形状。说实话，我会考虑使用旋转这是过分的，而不是伟大的浏览器性能。它应该工作。而且由于我们已经在旋转，您还可以使用其他变换效果将其调整为所需的形状。

• CSS border-image。 CSS也有一个border-image属性，可以用来做复杂的边界。结合SVG，这可以非常强大，并且可以为您提供所需的所有可变形边框。大多数现代浏览器现在都支持它（http://caniuse.com/#search=border-image）。

• 老派背景图片。不要害怕使用简单的PNG背景图像来处理这种事情。上述所有技术都有自己的位置，但背景图像运行良好，并且与旧浏览器版本兼容。如果其他解决方案不适合你，那么将它们用于这类事情没有任何问题。