为div创建一个border-radius

Question

我创建了一个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天.

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>

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