Nieregularny kształt z overflow hidden Opcje

[qbas-s]

Potrzebuję wykonać element div w css3 z nieregularnym kształtem i atrybutem overflow: hidden i width 100%. W środku ma być slider.
Mniej więcej ma to wyglądać tak


Ten post edytował qbas-s 10.02.2014, 17:19:02

[kujol]

Najprościej w ten sposób, ustaw sobie swoją szerokość:

[HTML] pobierz, plaintext 
		<div id="slider_top"> <h2>SLIDER</h2> </div>
		<div id="slider_bottom"></div>
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
#slider_top{
width:200px;
height:50px;
background:green;
text-align:center;
}
 
#slider_bottom{
border-left:200px solid green;
border-bottom:20px solid transparent;
border-right:50px solid transparent;
}
[HTML] pobierz, plaintext 

Ten post edytował kujol 10.02.2014, 19:57:10

[kamil4u]

Albo coś takiego: http://jsfiddle.net/jpc2Q/ - tylko za pomocą <h2>teskt</h2> i css3

[qbas-s]

Dzięki panowie, ale to nie jest to o co mi chodzi. To co mi pokazaliście nie wyświetli slidera na obszarze całego nieregularnego kształtu. Może źle to zademonstrowałem, ma być dokładnie tak:


ok znalazłem sposób: obróciłem slider o pewien kąt i od góry przykryłem go warstwą tak aby wyglądał jak na obrazku wyżej

Ten post edytował qbas-s 11.02.2014, 09:30:24