Nikolas96 Posted August 21, 2016 Share Posted August 21, 2016 hi how can i create crooked container and lines in web pages? like crooked div! or something like this sample image should i use svg or canvas?? thanks. Link to comment Share on other sites More sharing options...
Nikolas96 Posted August 28, 2016 Author Share Posted August 28, 2016 up... anybody??? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 28, 2016 Share Posted August 28, 2016 Crooked container? The slanted top edge container? And lines? What does that mean? No one answered cause no one fully under what you want and how/what it is used for. Link to comment Share on other sites More sharing options...
Nikolas96 Posted August 28, 2016 Author Share Posted August 28, 2016 (edited) i want to create custom shape container... like create custom shape div! (ellips,regtangle,star,Polygon) like this image: http://uupload.ir/files/d13o_untitled-1.jpg this orange div under the menu. Edited August 28, 2016 by Nikolas96 Link to comment Share on other sites More sharing options...
davej Posted August 28, 2016 Share Posted August 28, 2016 You can easily create the appearance of crooked containers, but you can't (afaik) create actual crooked (non-rectangular) containers. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 28, 2016 Share Posted August 28, 2016 (edited) The only non rectangular container div shape you can create is a skewed div using transform: with skew(); a circular div using border-radius, nothing as complex as ellipse, star, polygon. You can create these other shapes using svg to use as an overlay or underlay overlapping a normal div element. A triangle can be created with borders using above method, but the drawback is it is not responsive as can only use a fixed width unit, not percentage. Edited August 28, 2016 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now