Question

我已经创建了一个div，我要编写css来创建border-radius div。所以我希望border-radius应该如下图所示。

enter image description here

我编写的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

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边框的旧三角形hack绘制标记的结尾部分。尽管如此，你可能无法在角落上找到它。
轮换即可。创建第二个元素（可能使用CSS :after选择器），它将作为标记的结束部分。然后使用CSS将其旋转45度以使其具有所需的形状。说实话，我会考虑使用旋转来实现这一点，并且不适合浏览器性能。它应该工作。由于我们已经旋转，您还可以使用其他变换效果将其调整为所需的形状。
CSS border-image 。 CSS还具有border-image属性，可用于执行复杂边框。结合SVG，这可以非常强大，可以为您提供所需的所有可变形状边框。大多数现代浏览器现在都支持它（http://caniuse.com/#search=border-image）。
旧式背景图片。不要害怕只使用普通的png背景图像来做这种事情。上面的所有技术都有它们的位置，但是背景图像运行良好并且与旧的浏览器版本兼容。如果其他解决方案不适合你，那么将它们用于此类事情并没有错。

Answer 2

好吧，我设法做了类似的事情，它应该是跨浏览器支持的（在小编辑之后）：

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来实现您想要的半径;）

为div创建一个border-radius

2 个答案: