How Do CSS Triangles Work

How do CSS triangles work?

CSS Triangles: A Tragedy in Five Acts

As alex said, borders of equal width butt up against each other at 45 degree angles:

borders meet at 45 degree angles, content in middle

When you have no top border, it looks like this:

no top border

Then you give it a width of 0...

no width

...and a height of 0...

no height either

...and finally, you make the two side borders transparent:

transparent side borders

That results in a triangle.

CSS triangle background

To convert the top triangles to bottom triangles, add 180 deg to the current angles:

.secondSection {  background-image:     linear-gradient(176deg, #ff7a7d 75%, transparent 75%),    linear-gradient(184deg, #ff7a7d 75%, transparent 75%);  text-align: center;  height: 100vh;}
body {  margin: 0;}

<div class="secondSection"></div>

How does the css of the shape six-points-star work?

In CSS we make triangles using the border width. A six point star is nothing but two triangles places over one another in inverted position.

The first part of your code snippet makes a simple triangle. (Try commenting the :after part)

To make another triangle one could have used another div and position it over the first. But to accommodate it in a single class we have pseudo elements (:after). It is used to create inverted triangle.

Now coming to your second question why position absolute is needed. It is used to position the second triangle over the first one in inverted manner. You can see position relative is given #star-six.

Hope this helps. If needed I can share codepen link to explain it well.

Codepen Link

Refer above link for code

CSS triangles all across the width of browser

You can do it like this and pick whatever color you want the triangles to be:

EDIT: Shortened thanks to Temani Afi's comment.

.triangle {  height: 30px;  background-image:    linear-gradient(-45deg, transparent 75%, #FF0000 0),    linear-gradient(45deg, transparent 75%, #FF0000 0);  background-size: 40px 40px;  background-position: 20px 0;}

<article>  <div class="triangle"></div></article>

How does CSS arrow work?

How do you draw a 50px border around a 0x0 square?

By making a 100x100 square.

#########
#########
#########
#########
#########

But, how do you control all four edges independently?

By cutting the square into 4 triangles. Each triangle is one complete segment of border, but because the border is 50px thick, it is actually composed of four different wedges of solid border:

  #########
#   #####   #
###   #   ###
####     ####
###   #   ###
#   #####   #
  #########

Now, make the top, left and right triangles transparent and you're left with just the bottom border, which forms and upwards-pointing triangle.

      #    
    #####   
  #########

You're left with a triangle pointing upwards, in the color of the bottom border.

Here's a demonstration using a progressively larger and larger border width:

div {  margin: 10px;}
#one {  width: 90px;  height: 90px;      border-top: 5px solid blue;  border-left: 5px solid red;  border-right: 5px solid green;  border-bottom: 5px solid black;}
#two {  width: 50px;  height: 50px;      border-top: 25px solid blue;  border-left: 25px solid red;  border-right: 25px solid green;  border-bottom: 25px solid black;}

#three {  width: 0;  height: 0;      border-top: 50px solid blue;  border-left: 50px solid red;  border-right: 50px solid green;  border-bottom: 50px solid black;}

#four {  width: 0;  height: 0;      border-top: 50px solid transparent;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 50px solid black;}

<p>First, lets make a box, 100x100px. We'll use a 5px border, and a 90x90px content area.</p>  <div id="one"></div>
<p>Next, lets make the box smaller, but make the borders bigger. You should start to see how the four borders are controlled independly. We'll use a 50x50px box and a 25px border.</p>  <div id="two"></div>
<p>Now we'll shrink the box down to 0x0, with a 50px border on all edges. Now, there is no box, only border. It's now quite obvious that, as the border grows and the content shrinks, the border is cut along the corners at a 45 degree angle.</p>
<div id="three"></div>
<p>Finally, if we make the top, left and right borders transparent, ony the lower triangle making up the bottom border is left.</p>
<div id="four"></div>

Creating a triangle with only CSS

I believe you are looking for triangles with borders and a transparent cut in between (which none of the existing answers seem to address) and so here is an example. It's absolutely possible to achieve with but takes a lot of hacking around.

Using CSS Transforms:

The below snippet uses pseudo-elements and transforms to produce the triangles effect. The output is responsive but the usage of skew transforms mean that if the container's shape becomes a rectangle then the skew angles would need modification and more tweaking of the positioning attributes etc.

.container {  position: relative;  overflow: hidden;  height: 200px;  width: 200px;}.div-1,.div-2 {  position: absolute;  top: 0px;  left: 0px;  height: 100%;  width: 100%;  overflow: hidden;}.div-1 {  top: calc(-100% - 5px);  transform: skewY(45deg);  transform-origin: left top;  border-bottom: 2px solid;}.div-1:after {  position: absolute;  content: '';  height: calc(100% - 2px);  width: calc(100% - 2px);  top: calc(100% + 7px);  left: 0px;  transform: skewY(-45deg);  transform-origin: left top;  border: 1px solid;}.div-2 {  top: 5px;  transform: skewY(45deg);  transform-origin: left bottom;  border-top: 1px solid;}.div-2:after {  position: absolute;  content: '';  height: calc(100% - 7px);  width: calc(100% - 7px);  top: 0px;  left: 0px;  transform: skewY(-45deg);  transform-origin: left bottom;  border: 1px solid;}* {  box-sizing: border-box;}
/* just for demo */.container{  transition: all 1s;}.container:hover{  width: 400px;  height: 400px;}body{  background: radial-gradient(circle at center, aliceblue, mediumslateblue);  min-height: 100vh;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class='container'>  <div class='div-1'></div>  <div class='div-2'></div></div>

Why do these css styles create a triangle in react-native

Basically borders are not squares but are trapizoids at the corners, yours just have a width of zero.

this may help understand:

    #tri {    width: 0px;    background: antiquewhite;    border-top: 60px solid transparent;    border-bottom: 60px solid blue;    border-left: 60px solid green;    border-right: 65px solid green;}

<div id="tri""></div>

How Do CSS Triangles Work