Beste lezer,

Momenteel ben ik bezig een layout te slicen, en ben op een probleem gestuit.

Ik probeer het volgende te maken in CSS(3):


De bedoeling is als volgt:
- De headerafbeelding wordt vierkant aangeleverd, uit deze afbeeldingen moeten rechtsonder en linksonder 2 hoekjes worden gehaald.
- De 'arc' / boog moet hier nog onder vallen.
- Nu komt 'the tricky part'; Bij het resizen van je browser-scherm moet de boog meeschalen (de afbeelding schaalt al mee).

De breedte van de afbeelding is 1400px, de hoogte is niet echt relevant in dit geval. Ik heb de arc/boog ook al als afbeelding geprobeerd te fixen, maar bij het resizen van je scherm wordt de afbeelding dan vrij lelijk en wil hij de hoogte in.

Probleem 2 is bijna hetzelfde:


Als iemand het truucje voor issue #1 kent, kan ik nummer 2 vast wel zelf oplossen :-)

Ben benieuwd of iemand hier uitkomt!

Groeten, Robin.

http://jsfiddle.net/gXJa2/

Geen 'zin' om het testen wat er gebeurt als hij resized maar ik verwacht met percentages dat dat wel goed komt.

Origineel gepost door W van Rij

http://jsfiddle.net/gXJa2/

Geen 'zin' om het testen wat er gebeurt als hij resized maar ik verwacht met percentages dat dat wel goed komt.

Zover was ik helaas al, het spannende is eigenlijk de blauwe boog.. Die krijg ik er maar niet onder zoals de afbeelding.

Thanks for the effort though!

http://jsfiddle.net/gXJa2/1/

?

Origineel gepost door W van Rij

http://jsfiddle.net/gXJa2/1/

?

Oh god. Als de oplossing echt zo simpel is eet ik m'n schoen op :-)...

Ga het nu meteen testen!

En als je de border width nu ook een beetje dynamisch wilt hebben moet je het aantal PX veranderen naar bijv " border-bottom:thick solid blue; "
(of thin, medium)

Origineel gepost door W van Rij

En als je de border width nu ook een beetje dynamisch wilt hebben moet je het aantal PX veranderen naar bijv " border-bottom:thick solid blue; "
(of thin, medium)

Helemaal vergeten te reageren, bedankt voor je input W van Rij, het was niet de oplossing maar waardeer het enorm :-) Nadeel van jou oplossing is dat de afbeelding ook weer in de hoogte ging scalen, waardoor de border op een gegeven moment verdween. Lastig verhaal, uiteindelijk opgelost met een SVG image voor de boog en een rechthoekige afbeelding.

Nogmaals vielen dank!