+ 2

Can someone teach me how to draw shapes using html and css

i have seen that they use border tags for shapes like triangle and others, please explain me or give a link to such website from which i can understand. Thanks guys ....

2nd Nov 2017, 4:03 PM
Jitesh Gupta
26 ответов
+ 4
If you really need/want to draw the up arrow with tricky html and css only, avoiding utf8 symbols, <svg> and <canvas>, check this code: https://code.sololearn.com/WrSA738HPVs4/#css
3rd Nov 2017, 9:54 AM
visph
visph - avatar
+ 3
You cannot draw triangle as Html shape (ie: a <div> or any container is always a box), but you can use several workaround... The first way, about wich you seems to refer, is to take advantage of how the border can be drawn: setting a big border width and differents color on each side would make you understand the trick... .demo { border-style:solid; border-width:10px; border-color:red green blue orange; } ... with anyelse other style and applied to an empty div, this should result a full width and zero height sized box with 10px border width: see how two triangles are drawn on both sides are drawn... and now add 'width:0;' so you have four, oriented in different direction: set transparent as color to those you don't want and you get a triangle shape. Other ways are to use css mask (but not a very cross-browser compatible way), or draw shapes using <svg> or <canvas> elements ^^
2nd Nov 2017, 5:29 PM
visph
visph - avatar
+ 3
square is just a box with same width and height, and circle can be obtained by applying 'border-radius:50%;' on a squared container... other shapes are less or more tricky to obtains with other ways than <svg> and <canvas>...
2nd Nov 2017, 5:40 PM
visph
visph - avatar
+ 3
I said use <svg> and or <canvas> for other shapes ^^
2nd Nov 2017, 5:42 PM
visph
visph - avatar
+ 3
Use it inside a <span> and apply the 'font-size' you want...
2nd Nov 2017, 5:55 PM
visph
visph - avatar
3rd Nov 2017, 12:01 PM
bobbie
bobbie - avatar
+ 2
how will i make an arrow head pointing upward??
2nd Nov 2017, 5:52 PM
Jitesh Gupta
+ 2
For this kind of draw, you can advantageously search for utf8 symbols...
2nd Nov 2017, 5:53 PM
visph
visph - avatar
+ 2
I draw the shapes I want on graph paper then set x and y coordinates for each point for svg polygon. Good luck!!!
2nd Nov 2017, 6:19 PM
bobbie
bobbie - avatar
+ 2
no problem how big and where would you like it? Svg can be a lil tricky to scale and move though possible.
3rd Nov 2017, 11:17 AM
bobbie
bobbie - avatar
+ 1
The website which can teach you such things is this one right here, SoloLearn. Go to the HTML course and finish the HTML5 section.. all your questions should be answered.
2nd Nov 2017, 4:18 PM
Witty Phantom
Witty Phantom - avatar
+ 1
ok lets try again, 😥 but i didn't understood last time
2nd Nov 2017, 4:20 PM
Jitesh Gupta
+ 1
explain me how come border-right: 100px solid transparent; --will make only that area transparent which look like a triangle??
2nd Nov 2017, 4:35 PM
Jitesh Gupta
+ 1
ty @Bobbie
3rd Nov 2017, 8:36 AM
Jitesh Gupta
+ 1
boobie can you show me an example
3rd Nov 2017, 11:15 AM
Jitesh Gupta
+ 1
medium size, show example of a triangle make your code and share ur link here... thanks😀
3rd Nov 2017, 11:19 AM
Jitesh Gupta
+ 1
thanks @bobbie it was very helpful.
3rd Nov 2017, 1:22 PM
Jitesh Gupta
0
Learn it step by step, once you finish the SVG and Canvas parts you should be fine :)
2nd Nov 2017, 4:21 PM
Witty Phantom
Witty Phantom - avatar