Efekt linii szczeliny za pośrednictwem CSS

Question

Ktoś wie, w jaki sposób utworzyć jedną z tych linii (patrz obraz) w CSS?

Answer 1

Oto przybliżeniem na początek. Musisz dostosować szczegóły. Zasadniczo to, co zrobiłem, to stworzenie poprzecznego diva, a pod nim jest div, który stworzy cień z opadnięciem na końcach. Dywin div znajduje się na wyższej warstwie, więc widzisz tylko krawędź cienia.

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

Kolejny, nieco ciemniejsze: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

Tak, możesz to zrobić w css3. Będziesz musiał łączyć niektóre efekty, ale myślę, że szara linia (będziesz musiał dodać trochę więcej miejsca poniżej, wyjaśnione później) z cieniem zrobi.

Aby napisać cienia, który pojawia się tylko w jedną stronę (na górze), zaznacz to pytanie/odpowiedź: How can I add a box-shadow on one side of an element?

Na podstawie tego przykładu, można spróbować coś takiego:

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

cień jest wciąż tam po lewej, ale ukryty (-2px). To daje iluzję jednego cienia. To tylko początek, wypróbuj różne opcje i wróć, jeśli masz jakieś konkretne pytania. Ale najpierw zrób to sam.