Voor een project waar ik nu mee bezig ben komt er net boven de footer een 'soort van tabblad'. Erg veel duidelijker is het niet te omschrijven; daarom een afbeelding:
[Edit: zie ook http://fratsloos.nl/phphulp/csshoek/, waar de afbeelding niet verkleind is.]
Ik wil dit met CSS oplossen en heb al een aantal testen gedaan, maar niets is echt wat het zou moeten zijn. Daarom is jullie input erg welkom! :)
Probeersels
Vanzelfsprekend ben ik al even bezig geweest met deze uitdaging. Ik zie alleen niet hoe ik het op moet lossen. In de meeste gevallen is de basis het probleem niet, maar wel de schaduw.
In eerste instantie heb ik de schuine hoek gemaakt door op een element van 0*0px een border van 40px aan één kant te zetten. Dan krijg je een mooie 45graden hoek, maar de schaduw klopt dan niet: deze volgt alle borders en niet alleen die ene die niet transparant is.
Bij een andere poging heb ik gebruik genmaakt van elementen in de div's om de schaduw af te breken (door middel van overflow: hidden). Hierdoor krijg je erg rechte randen op de schaduw en daardoor sluit deze niet mooi aan. De schuine rand is in dit geval gemaakt door met een :after een rechthoek te creëren die 50 graden (de gewenste hoeveelheid) gedraaid is.
Online bekijken
De resultaten van de twee die het best in de buurt kwamen kan je zien op http://fratsloos.nl/phphulp/csshoek/.
De vraag
Ik ben op zoek naar tips en/of code hoe ik dit het best kan oplossen. Dan kan ook een hele andere richting zijn dan het begin zoalse te vinden is. Bij voorkeur werk ik voor dit soort elementen niet met afbeeldingen. Maar als het moet, dan moet het.
