tạo đường viền bán kính cho div

Question

Tôi đã tạo một div, trong đó tôi đã viết css để tạo border-radius cho số div đó. Vì vậy, tôi muốn các border-radius nên được như hình dưới đây.

Mã CSS tôi đã viết như sau.

{ 
      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); 
} 

Và thậm chí bạn có thể đi qua nó jsfiddle.net

Vì vậy, hãy giúp tôi, tôi đã bị mắc kẹt với điều này từ 2 ngày.

Answer 1

Vâng, tôi cố gắng làm điều gì đó tương tự, và nó phải qua trình duyệt được hỗ trợ (sau khi chỉnh sửa nhỏ):

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> 

Bạn có thể chơi với the height/width của div.box1, để đạt được bán kính bạn muốn;)

Answer 2

border-radius cho phép một số hình dạng phức tạp, sử dụng cú pháp mở rộng của nó. Ví dụ:

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

Xem http://jsfiddle.net/tDCaA/1/ để thực hiện điều này. Nó đang đi theo hướng bạn đang tìm kiếm, nhưng không hoàn toàn đạt được nó.

Vấn đề là việc tinh chỉnh thêm sẽ không tiến gần hơn nữa - với các đường thẳng bạn có trên hình ảnh mẫu, bạn thực sự không nhìn vào hiệu ứng border-radius nào cả; đó là một hình dạng phức tạp hơn border-radius được thiết kế để thực hiện. Vì vậy, lời khuyên của tôi sẽ ngừng tập trung vào border-radius làm câu trả lời ở đây và tìm kiếm các giải pháp thay thế.

Vậy các lựa chọn thay thế là gì? Dưới đây là một vài bạn có thể thử:

• Một SVG hình ảnh. Ví dụ này là một trường hợp tốt cho một hình ảnh SVG, vì bạn đã có một vài yếu tố thiết kế nhỏ trong đó giống như lỗ trắng ở phần cuối của thẻ mà không phải là dễ dàng để đạt được trong CSS.

• Hình tam giác CSS. Vẽ phần cuối của thẻ bằng cách sử dụng hack tam giác cũ với đường viền CSS. Bạn có thể gặp khó khăn khi các góc được làm tròn về điều này.

• Xoay. Tạo phần tử thứ hai (có thể sử dụng bộ chọn CSS :after), phần tử này sẽ đóng vai trò là phần cuối của thẻ. Sau đó sử dụng CSS để xoay nó 45 độ để cung cấp cho nó hình dạng yêu cầu. Thành thật mà nói, tôi sẽ xem xét việc sử dụng luân phiên cho điều này là quá mức cần thiết và không tuyệt vời cho hiệu suất trình duyệt. Nó sẽ làm việc mặc dù. Và vì chúng ta đã quay, bạn cũng có thể sử dụng các hiệu ứng chuyển đổi khác để tinh chỉnh nó thành hình dạng mong muốn.

• CSS border-image. CSS cũng có thuộc tính border-image có thể được sử dụng để tạo các đường viền phức tạp. Kết hợp với SVG, điều này có thể rất mạnh mẽ và có thể cung cấp cho bạn tất cả các biên giới có hình dạng biến mà bạn muốn. Hầu hết các trình duyệt hiện đại đều hỗ trợ nó ngay bây giờ (http://caniuse.com/#search=border-image).

• Hình nền trường học cũ. Đừng sợ chỉ sử dụng một hình nền png đồng bằng cho loại điều này. Tất cả các kỹ thuật trên đều có vị trí của chúng, nhưng hình nền hoạt động tốt và có khả năng tương thích với các phiên bản trình duyệt cũ. Không có gì sai khi sử dụng chúng cho loại điều này nếu các giải pháp khác không hiệu quả với bạn.