6

我创建了一个div，我必须在其中编写 css 来创建border-radius它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 天。

4

2 回答 2

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>

您可以使用the height/widthdiv.box1 来实现您想要的半径；）

于 2013-05-07T11:17:25.743 回答
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 边框的旧三角形 hack 绘制标签的末端部分。但是，您可能无法在此方面进行圆角处理。

  • 旋转。创建第二个元素（可能使用 CSS:after选择器），它将作为标签的结束部分。然后使用 CSS 将其旋转 45 度以使其具有所需的形状。不过老实说，我会考虑使用旋转来做这件事有点过头了，而且对浏览器的性能也不是很好。它应该可以工作。由于我们已经在旋转，您还可以使用其他变换效果将其调整为所需的形状。

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

  • 老式的背景图像。不要害怕只为这种事情使用普通的 png 背景图像。上面所有的技术都有它们的位置，但背景图像效果很好，并且与旧的浏览器版本兼容。如果其他解决方案不适合您，那么将它们用于此类事情并没有错。

于 2013-05-07T11:05:59.643 回答