Daily JavaScript Quiz - 2024-03-15

Home /
Daily JavaScript Quiz - 2024-03-15

What will be the output of the following CSS code? - 2024-03-15

.shape {
  width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid green;
  }

A blue square

A red circle

A green triangle

A yellow star

The answer is Option 3

This CSS code defines a CSS class named .shape that creates a triangle shape using borders. Let’s break down what each property does:

.shape {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

width: 0; and height: 0;: These properties set the width and height of the element to 0, effectively making it invisible.
border-left: 50px solid transparent;: This creates the left side of the triangle. It sets a solid border of 50 pixels in width, with the color set to transparent. This means the left side of the triangle will be transparent.
border-right: 50px solid transparent;: This creates the right side of the triangle, which is identical to the left side.
border-bottom: 100px solid green;: This creates the base of the triangle. It sets a solid border of 100 pixels in width, with the color set to green. This means the base of the triangle will be green.

The result is a triangle shape where the left and right sides are transparent and the base is green. Adjusting the values of the border-left, border-right, and border-bottom properties allows you to control the size and shape of the triangle.

Javascript Quizzes