Zmiana kształtu diva

Question

border-bottom-left-radius: 50px 50px;

Czy są jakieś inne komendy oprucz radius które mogły by nadać efekt inny niż zaokrąglenie rogów np. ścięte rogi ?

Answer 1

Tu masz przykład jak to zrobić:

https://css-tricks.com/examples/ShapesOfCSS/#octagon

 #octagon { 
width: 100px; 
height: 100px; 
background: red; 
position: relative; 
} 
#octagon:before { 
content: ""; 
position: absolute;
 top: 0; left: 0; 
border-bottom: 29px solid red; 
border-left: 29px solid #eee; 
border-right: 29px solid #eee; 
width: 42px; height: 0; 
}
 #octagon:after {
 content: ""; 
position: absolute; 
bottom: 0; left: 0; 
border-top: 29px solid red; 
border-left: 29px solid #eee;
border-right: 29px solid #eee; 
width: 42px; height: 0;
 }

Na tej stronie masz też inne niestrandardowe kształty.

Comments

Wow, 1 min nie mineła a ja dostałem konkretną odpowiedz. Dzięki :D

Answer 2

Jeśli angielski nie jest problemem, myślę, że poniższy link powinien także pomóc - autor rozlegle tłumaczy i pokazuje problem kszałtu diva. Pozdrawiam 

http://alistapart.com/article/css-shapes-101