Hiệu ứng dòng Slit qua CSS

Question

Bất kỳ ai cũng biết cách tạo một trong các dòng này (tham khảo hình ảnh) trong CSS?

Answer 1

Dưới đây là một xấp xỉ thô để bắt đầu. Bạn sẽ cần phải điều chỉnh chi tiết cụ thể. Về cơ bản những gì tôi đã làm là tạo ra một div overhang, và bên dưới đó là một div mà sẽ tạo ra một cái bóng với một falloff trên đầu. Các div nhô ra ngồi trên một lớp cao hơn, do đó bạn chỉ nhìn thấy các cạnh của bóng tối.

Demo: http://jsfiddle.net/X5muV/

Một số khác, hơi tối hơn:http://jsfiddle.net/X5muV/1/

HTML:

<div id="container"> 
    <div id="overhang"></div> 
    <div id="falloff-shadow"></div> 
</div> 

CSS:

#container { 
     background: #5A5A5A; 
     width: 700px; 
     padding: 200px 0 80px 0px; 
    } 
    #overhang { 
     background: #5A5A5A; 
     border-top: 1px solid #666; 
     height: 80px; 
     width: 600px; 
     margin: 0 auto; 
     position: relative; 
     z-index: 5; 
    } 
    #falloff-shadow { 
     width: 500px; 
     margin: 0 auto; 
     -webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     -moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     position: relative; 
     z-index: 1; 
     height: 1px; 
     top: -65px; 
    } 

Answer 2

Có, bạn có thể tạo điều đó trong css3. Bạn sẽ phải kết hợp một số hiệu ứng, nhưng tôi nghĩ rằng một dòng màu xám (bạn sẽ phải thêm một số không gian thêm bên dưới, giải thích sau) với một cái bóng sẽ làm.

Để viết một cái bóng mà chỉ xuất hiện ở một bên (trên cùng), kiểm tra câu hỏi này/câu trả lời: How can I add a box-shadow on one side of an element?

Dựa trên ví dụ, bạn có thể thử một cái gì đó như:

.myDiv 
{ 
    width: 700px; 
    height: 50px; 
    border-top: 2px solid #333; 
    -webkit-box-shadow: 10px 0px 0px -2px #888 ; 
} 

Cái bóng là vẫn còn ở bên trái, nhưng ẩn (-2px). Điều đó mang lại cho bạn ảo giác về một bóng duy nhất. Đây chỉ là khởi động, hãy thử các tùy chọn khác và quay lại nếu bạn có bất kỳ câu hỏi cụ thể nào. Nhưng hãy tự làm nó trước.