triangle in css in javascript

Here's an example of how to create a triangle shape using pure CSS and JavaScript:


<!DOCTYPE html>
<html>
<head>
	<title>Triangle Example</title>
	<style>
		.triangle {
		    height: 0;
		    width: 0;
		    border-top: 50px solid transparent;
		    border-bottom: 50px solid transparent;
		    border-left: 100px solid red;
		}
	</style>
</head>
<body>
	<div id="triangle"></div>
	<script>
		var triangle = document.getElementById("triangle");
		triangle.classList.add("triangle");
	</script>
</body>
</html>
427 chars
23 lines

In this example, we first create a div element with the ID "triangle". We then select this element using JavaScript and add a CSS class called "triangle" to it.

The CSS class defines a triangle shape by setting the height and width to 0, and using border properties to create the triangle shape with a 100px base and 50px height. Note that we set the border-top and border-bottom to transparent to create the angled sides of the triangle.

By adding the "triangle" class to our div element, we apply this CSS style to the element, creating a red triangle shape.

This is just one example of how to create a triangle in CSS and JavaScript; there are many other methods and variations you could use depending on your specific requirements.

similar javascript code snippets

center a div in javascript

create a carousel in html in javascript

create a div that scrolls horizontally and adjust its height to always be 80% of the screen height in javascript

scroll snap in javascript

how to toggle a class on an element in javascript

blue coloured cta in javascript

create a div of images that is always no bigger than 80% of the display height and the images scale accordingly. when you hover over an image it zooms slighly and the other images gray out in javascript

create a div that scrolls horizontally and adjust the height of its content to always be 80% of the screen height in javascript

how to remove a class from an element in javascript

how to change the border of an element in javascript

related categories