Làm cách nào để thêm các góc tròn ngoài vào div?

Question

Tôi đang tìm cách thêm các góc tròn "bên ngoài" vào mục bên được chọn để cho hiệu ứng mục này "đổ" vào nội dung tốt.

Trong ví dụ dưới đây, tôi muốn .top để có góc tròn dưới cùng bên phải với nền màu xám, cùng với góc trên cùng bên phải tương tự cho .bottom. Bạn nghĩ sao?

Tôi đang sử dụng Twitter Bootstrap và LESS, nếu điều đó giúp dễ dàng hơn.

jsFiddle: http://jsfiddle.net/3YXb2/

Rẽ này:

Into này:

Markup:

<div class="wrapper"> 
    <div class="sidebar"> 
     <div class="top"> 
      <p>Top</p> 
     </div> 
     <div class="middle"> 
      <p>Middle</p> 
     </div> 
     <div class="bottom"> 
      <p>Bottom</p> 
     </div> 
    </div> 
    <div class="container"> 
     <p>Content</p> 
    </div> 
</div> 

CSS:

body { 
    margin:10px; 
} 
div { 
    margin:0; 
    margin-right:-4px; 
    padding:0; 
    display:inline-block; 
    vertical-align:middle; 
} 
.wrapper { 
    width:100%; 
    display:block; 
    border:1px solid; 
} 
.container { 
    background-color:gray; 
    width:70%; 
    height:300px; 
} 
.sidebar { 
    background-color:white; 
    width:30%; 
    height:300px; 
} 
.middle { 
    background-color:gray; 
} 
.top,.middle,.bottom { 
    width:100%; 
    height:100px; 
    display:block; 
} 
p { 
    padding:40px 0 0; 
    margin:0; 
    text-align:center; 
} 

Answer 1

Css3 cung cấp thuộc tính border-radius. Tuy nhiên, xin lưu ý rằng điều này không có sẵn cho IE8 hoặc bất kỳ phiên bản nào thấp hơn. Có sẵn hack; nhưng chúng chỉ là: hack.

Cách sử dụng như sau:

.sidebar { 
     background-color:gray; 
     width:30%; 
     height:300px; 
    } 
    .middle { 
     background-color:gray; 
    } 
    .top,.middle,.bottom { 
     width:100%; 
     height:100px; 
     display:block; 
    } 
    .top{ 
     background: white; 
     border-bottom-right-radius:10px; 
    } 
    .bottom{   
     background: white; 
     border-top-right-radius: 10px; 
    } 

jsFiddle example

Answer 2

bạn có thể sử dụng border-radius của CSS. bạn có thể xem trình tạo biên giới vòng trực tuyến tại đây: http://border-radius.com/

Answer 3

Bạn muốn sử dụng border-radius và đó là biến thể.

EG

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px; 

đẹp công cụ cho việc này ở đây: http://www.cssportal.com/css3-rounded-corner/

Answer 4

Sử dụng CSS3 border-radius.

.top 
    { 
     border-bottom-right-radius: 3px; 
     -moz-border-radius-bottomright: 3px; 
     -webkit-border-bottom-right-radius: 3px; 
    } 

.bottom 
    { 
     border-top-right-radius: 3px; 
     -moz-border-radius-topright: 3px 
     -webkit-border-top-right-radius: 3px; 
    } 

Answer 5

Nếu tôi hiểu chính xác bạn đang tìm kiếm bán kính đường viền ngược. Đây có phải là những gì bạn có trong tâm trí?

http://jsfiddle.net/3pW2M/

này sẽ không hoạt động nếu vùng trắng cần phải được minh bạch để hiển thị một hình nền cho ví dụ.

.top { 
    position: relative; 
} 

.topcorner { 
    position: absolute; 
    margin: 0; 
    bottom: 0; 
    right: 0; 
    height: 50px; 
    width: 50px; 
    background: gray; 
} 

.topcorner:after { 
    content: ''; 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    background: white; 
    border-radius: 0 0 50px 0; 
} 

Answer 6

Tôi giả định rằng điều này sẽ cần thiết cho một số loại tương tác người dùng, điều hướng, tab, ext.Vì vậy, tôi thiết lập nó trên một chức năng di chuột jquery- jsFiddle

$(document).ready(function() { 
    $('.top').hover(function() { 
    $('.middle').toggleClass('notSelect2'); 
    $('.bottom').toggleClass('notSelect3'); 
    }); 

    $('.middle').hover(function() { 
    $('.top').toggleClass('notSelect'); 
    $('.bottom').toggleClass('notSelect2'); 
    }); 

    $('.bottom').hover(function() { 
    $('.middle').toggleClass('notSelect'); 
    $('.top').toggleClass('notSelect3'); 
    }); 
});