[css] How do CSS triangles work?

I know this is an old one, but I'd like to add to this discussion that There are at least 5 different methods for creating a triangle using HTML & CSS alone.

  1. Using borders
  2. Using linear-gradient
  3. Using conic-gradient
  4. Using transform and overflow
  5. Using clip-path

I think that all have been covered here except for method 3, using the conic-gradient, so I will share it here:

_x000D_
_x000D_
.triangle{_x000D_
        width: 40px;_x000D_
        height: 40px;_x000D_
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);_x000D_
    }
_x000D_
<div class="triangle"></div>
_x000D_
_x000D_
_x000D_

Create CSS Triangles Using Conic Gradient

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to geometry

Circle button css Using atan2 to find angle between two vectors How do I compute the intersection point of two lines? Creating a triangle with for loops Plotting a 3d cube, a sphere and a vector in Matplotlib How to find the Center Coordinate of Rectangle? Evenly distributing n points on a sphere How do CSS triangles work? How to draw circle in html page? Generate a random point within a circle (uniformly)

Examples related to polygon

How do CSS triangles work? Polygon Drawing and Getting Coordinates with Google Map API v3 A simple algorithm for polygon intersection How to determine if a list of polygon points are in clockwise order? How can I determine whether a 2D Point is within a Polygon?

Examples related to css-shapes

How to create a inner border for a box in html? CSS Circle with border How to Make A Chevron Arrow Using CSS? How to make a div with a circular shape? How to make rectangular image appear circular with CSS Half circle with CSS (border, outline only) How to draw a checkmark / tick using CSS? how to draw a rectangle in HTML or CSS? CSS3 Transform Skew One Side Center Triangle at Bottom of Div