Ik ben bezig met het ontwikkelen van een website voor een klant. De afbeeldingen hebben een scherpe hoek (rechtsboven) en zijn 100% breed.
Hoe kan ik dit toepassen in CSS? Iemand een idee?

Het lijkt erop dat dit niet kan, tenzij je achtergrond één kleur is door het een border te geven. (zoals op http://jsfiddle.net/k3qp4ags/)
Echter ziet het er niet uit dat dit een optie is, als ik naar je afbeelding kijk.

Origineel gepost door Tijs de Vries

Het lijkt erop dat dit niet kan, tenzij je achtergrond één kleur is door het een border te geven. (zoals op http://jsfiddle.net/k3qp4ags/)
Echter ziet het er niet uit dat dit een optie is, als ik naar je afbeelding kijk.

Klopt! De achtergrond heeft een gradiënt, dus dat is geen optie.

Afbeelding als png maken waarbij het dat hoekje transparant is?

Mocht je het hoekje willen toevoegen in afbeeldingen:
Zou ik dat hoekje inderdaad gewoon wegsnijden in Photoshop/Gimp en dan opnieuw uploaden, is helemaal niet moeilijk om te doen! Gewoon een vierkantje maken en 45 graden draaien naar links, en dan verwijderen op de gewenste grootte.

Mocht je het hoekje willen verwijderen dus een vierkante afbeelding willen maken:
Gewoon even in Photoshop/Gimp de selecteer tool pakken, en hem recht trekken.

Kan allemaal met CSS.

Graniet: http://www.cssmatic.com/gradient-generator

Cutt corner: http://jsfiddle.net/2bZAW/ http://stackoverflow.com/questions/7...ners-using-css

Veel succes

Origineel gepost door Ferdi Reichart

Kan allemaal met CSS.

Graniet: http://www.cssmatic.com/gradient-generator

Cutt corner: http://jsfiddle.net/2bZAW/ http://stackoverflow.com/questions/7...ners-using-css

Veel succes

Dat is met een vaste hoogte, maar dat werkt responsive niet helaas.

Op zich kan het wel. Je maakt een container om de image met een position relative. Vervolgens zet je hier dus de image in + een extra div met een position absolute en een vaste hoogte en breedte ter grootte van dat schuine hoekje. Dit hoekje heeft een schuin vlak met vulling van dat grijze voor de helft en de andere helft is onder transparant (png afbeelding). Deze div met het hoekje positioneer je rechts bovenin de div met position absolute (top: 0; right: 0;).

Kan eventueel een jsfiddle voor je maken maar dan moet ik even wat meer tijd hebben. Ga nu zo naar bed. Hopelijk snap je het idee... z

Je kan in plaats van height padding-top met % gebruiken als de images allemaal een standaard formaat hebben.

http://jsfiddle.net/2bZAW/5252/

Padding-bottom bedoel ik, deze is responsive : http://jsfiddle.net/2bZAW/5254/

Origineel gepost door Ferdi Reichart

Padding-bottom bedoel ik, deze is responsive : http://jsfiddle.net/2bZAW/5254/

Ook goede oplossing maar (nog) niet cross browser.

Origineel gepost door Ruurd de Wind

Ook goede oplossing maar (nog) niet cross browser.

Hoezo? De padding bottom truck om een ratio te houden werkt volgens mij overal.
Mooie oplossing Ferdi!

Hoezo? Omdat het niet cross browser is.

Check browser compatiblity hier bijvoorbeeld: http://www.w3schools.com/cssref/css3...orm-origin.asp

Origineel gepost door Ruurd de Wind

Hoezo? Omdat het niet cross browser is.

Check browser compatiblity hier bijvoorbeeld: http://www.w3schools.com/cssref/css3...orm-origin.asp

Je quote hem op zijn padding bottom aanpassing. Dus daarom dacht ik dat je daar naar refereerde met je reactie.
Dat terzijde, wat vind jij cross browser? Als je ie7 en 8 wilt ondersteunen heb je een punt. Maar verder is het overal te gebruiken: http://caniuse.com/#feat=transforms2d (97% van de Nederlandse browsers, net zoveel als border radius)