爲div創建邊框半徑

我創建了div，其中我必須編寫用於創建border-radius的css到div。所以我想border-radius應該像下面的圖片。爲div創建邊框半徑

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天。

來源

2013-05-07 Sanganabasu

你也可以做一個jsfiddle嗎？ – Raptor 2013-05-07 10:00:24

@ShivanRaptor我已更新，請通過它。 – Sanganabasu 2013-05-07 10:04:59

沒有'background-radius'。你想做正確的部分嗎？或者小白色的「洞」？爲什麼不使用背景圖像呢？ – Raptor 2013-05-07 10:17:02

嗯，我設法做類似的東西，它應該是跨瀏覽器（後小編輯）支持：

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來實現你想要的半徑;）

來源

2013-05-07 11:17:25 drinchev

這對我來說看起來不錯 – Sutulustus 2013-05-07 11:46:30

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背景圖像來處理這種事情。上述所有技術都有自己的位置，但背景圖像運行良好，並且與舊瀏覽器版本兼容。如果其他解決方案不適合你，那麼將它們用於這類事情沒有任何問題。

來源

2013-05-07 11:05:59 Spudley

爲div創建邊框半徑

回答

相關問題