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

Question

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 ....

Answer 1

https://css-tricks.com/working-with-shapes-in-web-design/
https://css-tricks.com/examples/ShapesOfCSS/
https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape
https://www.google.de/amp/s/1stwebdesigner.com/css-shapes/amp/
https://www.w3schools.com/howto/howto_css_shapes.asp
+ watch different YouTube videos about it, which will help you to understand it.
Bonne chance :)

Answer 2

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

Answer 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 ^^

Answer 4

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>...

Answer 5

I said use <svg> and or <canvas> for other shapes ^^

Answer 6

Use it inside a <span> and apply the 'font-size' you want...

Answer 7

Hope this helps

https://code.sololearn.com/WnPq421STeT5/?ref=app

Answer 8

how will i make an arrow head pointing upward??

Answer 9

For this kind of draw, you can advantageously search for utf8 symbols...

Answer 10

I draw the shapes I want on graph paper then set x and y coordinates for each point for svg polygon. Good luck!!!

Answer 11

no problem how big and where would you like it? Svg can be a lil tricky to scale and move though possible.

Answer 12

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.

Answer 13

ok lets try again, 😥 but i didn't understood last time

Answer 14

https://www.html5rocks.com/en/tutorials/shapes/getting-started/

Answer 15

explain me how come border-right: 100px solid transparent; --will make only that area transparent which look like a triangle??

Answer 16

ty @Bobbie

Answer 17

boobie can you show me an example

Answer 18

medium size, show example of a triangle make your code and share ur link here... thanks😀

Answer 19

thanks @bobbie it was very helpful.

Answer 20

Learn it step by step, once you finish the SVG and Canvas parts you should be fine :)