CSS owalny kształt wycięty z div
Powyższy obraz jest to, co staram się tworzyć, ale mam pewne trudności z owalnym kształcie. Wyjaśnienie:
- Pasek menu jest div z lekkim gradientu liniowego (ciemnoszarym przejrzysty lżejsze szary)
- Firma logo obraz ma przejrzystą BG i będą siedzieć „ontop” z paska menu
- owalny wyłącznik będzie musiał dopasować owal logo i posiada przejrzysty lukę między tym pojawi się kolor tła (zmienia się na każdej stronie, pomarańczowy jest tylko przykładem)
próbowałem i zawiodło wiele razy radialnym gradientem - udało mi się wykreślić koło, ale co Nie pracuj nad tym, jak zrobić owal, a następnie nie można uzyskać liniowego gradientu do pracy. Zobacz kod:
.circle {
height: 10em;
background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
}
Jeżeli kształt wycięcia i gradient jest posortowana, logo zostanie umieszczone na wierzchu.
Wszelkie sugestie lub rozwiązania jsfiddle będą mile widziane, dziękuję!
EDIT: jsfiddle here
EDIT 2: rozwiązali ten problem poprzez zmianę konstrukcji nieznacznie, dzięki tym, którzy odpowiedzieli. Napisałem jquery, aby rozwiązać ten problem - kiedy kolorowy obszar przewinie się poza pole widzenia, owalna ramka i obramowanie nagłówka podniosą kolor górnej sekcji zamiast przezroczystości.
http://stackoverflow.com/a/14747815/1654265 –
mam schowane Bliskie głos. I +1, właściwie to, co próbowaliście, było źródłem inspiracji :) –
Dobrze słyszeć - i dziękuję –