Home Carbon Ads Creating Triangles And Circles Using CSS

Creating Triangles And Circles Using CSS

triangle-circle-css

In this post I will show you how to create triangles and circles using CSS only.

Circle is created by providing border-radius 50% of the height or width of div. For circle height and width should be equal.

Triangle has three sides therefore we take three borders and provide width to them. One border forms the actual triangle so we make other two invisible. Don’t forget to make the height and width to 0px.

Narayan Prusty
HTML5 Form Placeholder AttributeHorizontal and vertical Centering Using CSS

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago Web Development
Share this
Related Articles