PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
T

Background schuin met 2 kleuren

Door Tim Kampherbeek op 05-10-2014 14:46
4.054 views
Hoi,

De hele dag ben ik al aan het zoeken maar het lukt me maar niet om het te vinden, ik wil graag met css een background met 2 kleuren maken die schuin oversteken.

Hiermee bedoel ik dus: streep begint linksonder en eindigd rechtsboven en de vlakken zijn 2 verschillende kleuren, boven blauw, onder wit.

Weet iemand hoe ik dit voor mekaar kan krijgen? alvast bedankt!
T
Tim Kampherbeek
05-10-2014 19:24
Het is logisch dat het met grandient moet maar ik kan maar niet uitvogelen hoe op deze manier.

Ik wil namelijk maar 2 strakke kleuren geen overschimming
- SanThe -
05-10-2014 19:47
Misschien gewoon een plaatje maken.
D
D B
05-10-2014 20:00 gewijzigd op 05-10-2014 20:02
Volgens mij moet dit met die tool van Frank aardig lukken.

Is dit wat je zoekt?




background: #004799; /* Old browsers */
background: -moz-linear-gradient(45deg,  #004799 0%, #004799 49%, #000000 50%, #ffffff 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#004799), color-stop(49%,#004799), color-stop(50%,#000000), color-stop(51%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* IE10+ */
background: linear-gradient(45deg,  #004799 0%,#004799 49%,#000000 50%,#ffffff 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004799', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
T
Tim Kampherbeek
05-10-2014 22:47
Nee ik wil het zo: http://jsbin.com/iqemot/284/edit

Maar dan niet met border want dan is de lijn niet mooi, kan dan de pixels ervanaf lezen.
Een plaatje is geen optie want dit is voor een phonegap app
Wouter J
05-10-2014 23:08
Een andere optie is er niet, dit is het beste wat je met CSS kan bereiken. Schuine zijdes werkt nog niet optimaal in de browsers (probeer maar eens een element dat je 45 graden gedraaid hebt een border te geven).
p
phpnuke r
06-10-2014 01:49 gewijzigd op 06-10-2014 01:56
Valt er niet iets te bereiken met transform:rotate ? Het is wel even div's over elkaar heen plaatsen(tenzij de div buiten de pagina word getoond) maar op deze manier zou het volgens mij moeten kunnen. Echter word het er geen mooie duidelijke code van. Maar het zou een oplossing kunnen bieden voor jouw probleem? Het is volgens mij scherper dan border-top&right.

p.s. Wouter betreft 45 graden draaien, is dat niet al voldoende om zoiets na te bootsen.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform

Reageren

Inloggen om te reageren