How to make a triangle in css

How to create a shape in css

div {
	clip-path: polygon(100% 100%, 100% 100%, 100% 100%)
}

How to make a triangle in css

.triangle{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  border-width:100px;
}

Make triangle using div

// css clip
<div id="triangle"></div>

#triangle {
	background-color: #003BDE;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	width: 100px;
	height: 100px;
}

Source: usefulangle.com

Make a circle in javascript

<!DOCTYPE html>
  <html>
  <head>
  <meta charset=utf-8 />
  <title>Draw a circle</title>
  </head>
  <body onload="draw();">
  <canvas id="circle" width="150" height="150"></canvas>
  </body>
  </html>

Triangle css

#triangle {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 30px solid blue;
}

Source: lucaswillems.com

Similar codes

3 votes241 views2 answers
What is vh in css
CSS
0 vote233 views1 answer
CSS fluid type sizing based on viewport
CSS
1 vote249 views1 answer
Increase font size zenity
CSS
0 vote236 views1 answer
Spinner in html css react
CSS
0 vote232 views1 answer
Copy html css from website
CSS
3 votes225 views3 answers
Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
CSS
0 vote252 views1 answer
Selection Handler css
CSS
0 vote243 views1 answer
Materialize css form file input
CSS
0 vote272 views1 answer
Shadow on hover class on card bootstrap
CSS Bootstrap
1 vote235 views2 answers
How to middle fixed element
CSS