HomeНаука и техникаRelated VideosMore From: techsith

How to make a Triangle and circle in css - html div element

498 ratings | 55761 views
How to draw a triangle and circle in html using pure css html triangle shape css triangle div element html triangle down html symbols html triangle button html triangle right css triangle with border Make Shapes with CSS The Shapes of CSS html circle shape css circle div element css circle with border radius css shapes arrow css circles how to make a triangle in css how to make a triangle button in css how to make a triangle div css how to draw a triangle in css how to draw a triangle in css3 how to make a circle in css how to draw a circle in css how to draw a circle in css3 how to make a circle div in css how to create circles with css
Html code for embedding videos on your blog
Text Comments (40)
T&NW (2 months ago)
Respect you sir! thanks it helped me to learn the basics...
Ahmed Alqassass (2 months ago)
Thank you from Hamburg
Don Fath (3 months ago)
Santiago Castillo (8 months ago)
you ca also say. border-radios:100% for the circle
xing liu (10 months ago)
that is great, solved my problems.!!! really thanks
Naresh Chinthala (11 months ago)
Thanks bro👌👌👌👌👌
techsith (11 months ago)
Thanks for watching Naresh! :)
Kawsar Ahmed (1 year ago)
thank you :)
techsith (1 year ago)
Thanks for watching! :)
Jimmy Issa (1 year ago)
Great video you helped me a lot. An easier way to make a circle is this; .circle { height: 50px; width: 50px; background-color: red; border-radius: 100%; } Just set the border-radius to 100% instead of going through the tiresome effort to properly set it to the same dimensions as the height and width. 100% works with all sizes.
Nhẫn Trương (1 month ago)
techsith (1 year ago)
good work!
Sankar Prasad Panda (1 year ago)
how to make an arrow?
Web Zone (1 year ago)
Grate tutorial....
Manjula Katkuri (4 months ago)
"grate" its actually great if u know grammar
techsith (1 year ago)
Thanks for watching! :)
CHANDAN THAKUR (1 year ago)
Thanx a lot sir
Kishor Tiwari (1 year ago)
thank u very much. helped me a lot.
myasar rasool (2 years ago)
I want to divide the row in many triangles and add content to it.Like in grid system, row is divided into square divs.can i?
Red Nerdy Fox (2 years ago)
Great tutorial! Thank you!
Olubukola Ogunsola (2 years ago)
great !
Omion Hattac (2 years ago)
Abhishek Kaushik (2 years ago)
thank you for this helpful tutorial! Is there any way to add the text within a triangle shaped CSS?
myasar rasool (2 years ago)
awsum....nice question abhi.... helpfull..
Abhishek Kaushik (2 years ago)
thank you very much for your help :)
techsith (2 years ago)
you can use a div with position absolute. https://jsfiddle.net/jspatel/o2xte716/
Mattia Giovanetti (2 years ago)
Nice tutorial, it's clear. I need draw an octagon with different segments colored in percentage, any idea?
Mattia Giovanetti (2 years ago)
+techsith thank you! :)
techsith (2 years ago)
+Mattia Giovanetti in that case i would suggest using either canvas or svg. css is very easy but for more complex shapes with customized colors you dont want to use css.   http://www.storminthecastle.com/2013/07/24/how-you-can-draw-regular-polygons-with-the-html5-canvas-api/
Great tutorial, thanks a lot.
Thomas Matteo (2 years ago)
question: so I want to make the triangle both a div id and also a component in a game that can be controllable, is that possible? and if so how would i do it
techsith (2 years ago)
+Thomas Matteo How to you want to control it. do you want to move it around and/or change the size ? if so you can use animation to do that . you can also use javaScript to control the element. For more complex triangles i would use SVG or canvas.
Thomas Matteo (2 years ago)
or better yet, can i control the component in the html document via the css document?
Ganesh Sahu (2 years ago)
How to make an irregular custom shape say a shirt
techsith (2 years ago)
+Ganesh Sahu you can do it using css. however i would suggest using SVG. CHeck out this link they are showing how to make various shapes using css. https://css-tricks.com/examples/ShapesOfCSS/ does that answer your question?
Adell Traylor (2 years ago)
Once you create the circle can you write text inside it and make it anext anchor link?
Adell Traylor (2 years ago)
Wow thanks, this will really help with a project I am working on. I will let you know how it turns out.
techsith (2 years ago)
+Adell Traylor yes, you can do following. example http://codepen.io/codepatel/pen/jWXYGx
adeeb al-mahdaly (3 years ago)
hi how to do 3 circle in the same line
techsith (3 years ago)
+adeeb al-mahdaly you can give display:inline-block; here is an example https://jsfiddle.net/jspatel/9Lxer2ru/1/

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.