2012-04-18 46 views
19

Tôi đang tạo tiện ích con javascript để thay đổi kích thước các div lân cận, để hiển thị thêm hình nền của div khi người dùng di chuột lên đó. Điều này là đơn giản, và làm việc độc đáo với các div có cạnh thẳng (rõ ràng). Tuy nhiên, cạnh biên 'cần' được nghiêng.Div có đường viền nghiêng bằng CSS3?

Có cách nào đơn giản bằng cách sử dụng css3 để tạo đường viền nghiêng giữa 2 phần tử DOM không?

Tôi đã gặp các biến đổi css3 (cụ thể là skew) và lừa biên giới đường chéo (sử dụng nửa màu, nửa trong suốt), nhưng không có vẻ nào trong số này có thể đạt được những gì tôi cần.

Hiệu quả Tôi đang cố gắng để đạt được giống như trong hình ảnh này:

diaglonal border between dom elements

+9

1 cách đơn giản cho sự lựa chọn của các ví dụ hình ảnh. –

Trả lời

8

Bạn có thể nhúng kỹ thuật hình ảnh của mình theo cách xoay (xem CSS2 transform: rotate(<X>deg)) <div/> và sau đó xoay hình ảnh được nhúng với góc ngược lại.

Hoặc, bạn có thể sử dụng SVG (với <clipPath>) để đạt được hiệu ứng này. Thêm SVG được nhúng trong các thẻ <object/> có thể sử dụng JavaScript, do đó phần đáp ứng có thể là một phần của chuyến đi.

Cả JSFiddle đều đang trên đường.

EDIT1: CSS Version: http://jsfiddle.net/kU3tu/
EDIT2: SVG Version: http://jsfiddle.net/b2JJK/

+0

Cảm ơn tất cả mọi người cho câu trả lời của bạn! Thật không may ưu tiên thay đổi, và tôi đã không có cơ hội để thực sự thực hiện bất kỳ giải pháp nào được nêu ra, nhưng kiểm tra các câu đố, tôi chắc chắn họ sẽ làm việc khi tôi cuối cùng nhận được nó! –

1

Các giải pháp tôi có thể nghĩ đến là sử dụng hai hình ảnh hoàn toàn vị trí và một container div với tràn thiết lập để ẩn.

Hình ảnh màu đỏ và màu xanh lá cây (màu đỏ có thể ngắn hơn từ đầu và màu xanh lục có thể ngắn hơn từ dưới cùng vì các phần này không hiển thị). Màu xanh là vùng chứa bị tràn: bị ẩn.

Image

Nhưng giải pháp này đòi hỏi phải xoay hình ảnh, mà có thể không phù hợp với bạn sử dụng.

Giải pháp thứ hai là sử dụng một hình ảnh và div phân cách chỉ là một đường viền được xoay. Nhưng trong trường hợp này, bạn có thể chuẩn bị hình ảnh thích hợp trước đó mà không cần phải hack.

+0

Tùy chọn thứ hai không khả thi vì hình ảnh đường viền sẽ cần phải thay đổi khi đường viền trượt từ bên này sang bên kia. Tùy chọn đầu tiên tôi cũng có thể có một đi, tôi đoán tôi có thể thử và xoay ngược hình ảnh chính nó để hoàn tác vòng quay của div ... –

4

Tôi đã cố gắng từ bên cạnh tôi có thể đó là giúp bạn.

HTML

<div class="container"> 
<div class="imageWrap ro"> 
    <div class="pic"></div> 
</div> 
<div class="imageWrap"> 
    <div class="pic2"></div> 
</div> 
</div>​ 

CSS

.container{ 
    width:600px; 
    height:400px; 
    border:1px solid red; 
    overflow:hidden; 
    white-space:nowrap; 
} 
.imageWrap{ 
    width:300px; 
    display:inline-block; 
    height:500px; 
    position:relative; 
    width:400px; 
    vertical-align:top; 
    margin-left:-70px; 
} 
.imageWrap.ro{ 
    border-right:5px solid red; 
    -webkit-transform:rotate(15deg); 
    -moz-transform:rotate(15deg); 
    transform:rotate(15deg); 
    overflow:hidden; 
    z-index:1; 
    margin-left:-100px; 
    margin-top:-80px; 
} 
.pic{ 
    background:url('http://lorempixel.com/output/nightlife-q-c-746-711-9.jpg'); 
    -webkit-transform:rotate(-15deg); 
    -moz-transform:rotate(-15deg); 
    transform:rotate(-15deg); 
    width:640px; 
    height:640px; 
    position:absolute; 
    left:-50px; 
} 
.pic2{ 
    width:400px; 
    height:400px; 
    background:url('http://lorempixel.com/output/sports-h-c-609-626-7.jpg'); 
} 

Kiểm tra này http://jsfiddle.net/fZMuJ/5/

Các vấn đề liên quan