CSS ile yarık çizgi efekti

Question

Bu satırlardan birini oluşturmanın bir yolu bilen var mı (resme bakın) CSS?

Answer 1

burada başlangıç ​​için bir kaba yaklaşım bu. Özellikleri ayarlamanız gerekecek. Temel olarak yaptığım şey bir sarkık div yaratmak, bunun altında ise uçlarında bir falloff ile bir gölge yaratacak bir div. Sarkık div daha yüksek bir tabaka üzerinde oturur, böylece sadece gölgenin kenarını görürsünüz.

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

diğeri biraz daha koyu: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

Evet, bunu css3'te oluşturabilirsiniz. Bazı efektleri birleştirmek zorunda kalacaksınız, ama sanırım gri bir çizgi (daha sonra biraz daha fazla alan eklemek zorunda kalacaksınız), bir gölge ile yapacağız. gölge

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

: Bu örnekte dayanarak How can I add a box-shadow on one side of an element?

, gibi bir şey deneyebilirsiniz:

sadece bir taraftan (üstte) görünen bir gölge yazmak için, bu soru/cevap kontrol hala solda, ama gizli (-2px). Bu size tek bir gölgenin yanılsamasını verir. Bu sadece bir başlangıçtır, farklı seçenekleri deneyin ve herhangi bir sorunuz olduğunda geri gelin. Ama önce sen kendin yap.