How do CSS triangles work

Question

There re plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I m particularly puzzled with a triangle      x000D   x000D   triangle-up   x000D    width  0  x000D    height  0  x000D    border-left  50px solid transparent  x000D    border-right  50px solid transparent  x000D    border-bottom  100px solid red  x000D    x000D   lt div id  triangle-up  gt  lt  div gt  x000D   x000D   x000D    How and why does it work

User · Answer

If you want to play around with border-size  width and height and see how those can create different shapes  try this    x000D   x000D  const sizes    32  32  32  32   x000D  const triangle   document getElementById  triangle    x000D   x000D  function update   target      x000D    let index   null  x000D     x000D    if  target    x000D      index   parseInt target id   x000D   x000D      if   isNaN index     x000D        sizes index    target value  x000D        x000D      x000D     x000D    window requestAnimationFrame      gt    x000D      triangle style borderWidth   sizes map size   gt      size  px   join       x000D       x000D      if  isNaN index     x000D        triangle style target id        target value  px   x000D        x000D        x000D    x000D   x000D  document querySelectorAll  input   forEach input   gt    x000D    input oninput   update  x000D      x000D   x000D  update      x000D  body   x000D    margin  0  x000D    min-height  100vh  x000D    display  flex  x000D    justify-content  center  x000D    align-items  center  x000D    overflow  hidden  x000D    x000D   x000D   triangle   x000D      border-style  solid  x000D      border-color  yellow magenta blue black  x000D      background  cyan  x000D      height  0px  x000D      width  0px  x000D    x000D   x000D   controls   x000D    position  fixed  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    background  white  x000D    display  flex  x000D    box-shadow  0 0 32px rgba 0  0  0   125   x000D    x000D   x000D   controls  gt  div   x000D    position  relative  x000D    width  25   x000D    padding  8px  x000D    box-sizing  border-box  x000D    display  flex  x000D    x000D   x000D  input   x000D    margin  0  x000D    width  100   x000D    position  relative  x000D    x000D   lt div id  triangle  style  border-width  32px 32px 32px 32px   gt  lt  div gt  x000D   x000D   lt div id  controls  gt  x000D     lt div gt  lt input type  range  min  0  max  128  value  32  id  0    gt  lt  div gt  x000D     lt div gt  lt input type  range  min  0  max  128  value  32  id  1    gt  lt  div gt  x000D     lt div gt  lt input type  range  min  0  max  128  value  32  id  2    gt  lt  div gt  x000D     lt div gt  lt input type  range  min  0  max  128  value  32  id  3    gt  lt  div gt  x000D     lt div gt  lt input type  range  min  0  max  128  value  0  id  width    gt  lt  div gt  x000D     lt div gt  lt input type  range  min  0  max  128  value  0  id  height    gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is an animation in JSFiddle I created for demonstration   Also see snippet below     This is an Animated GIF made from a Screencast     x000D   x000D  transforms     x000D             border-left-width      30    margin-left    70    x000D             border-bottom-width    80    x000D             border-right-width     30    x000D             border-top-width       0    margin-top    70    x000D             width                  0    x000D             height                 0    margin-top    120    x000D             borderLeftColor        transparent    x000D             borderRightColor       transparent   x000D     x000D   x000D   x000D      a   click function        border   trigger  click       x000D   function      x000D      var duration   1000 x000D          border   click function     x000D      for   var i 0  i  lt  transforms length  i       x000D            this  x000D            animate transforms i   duration  x000D        x000D         end   x000D    jQuery   x000D   border   x000D      margin  20px 50px  x000D      width  50px  x000D      height  50px  x000D      border-width  50px  x000D      border-style  solid  x000D      border-top-color  green  x000D      border-right-color  yellow  x000D      border-bottom-color  red  x000D      border-left-color  blue  x000D      cursor  pointer x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com color jquery color-2 1 2 min js  gt  lt  script gt  x000D  Click it  lt br gt  x000D   lt div class  border  gt  lt  div gt  x000D   x000D   x000D      Random version   x000D   x000D      x000D     Randomize array element order in-place  x000D     Using Durstenfeld shuffle algorithm  x000D      x000D  function shuffleArray array    x000D      for  var i   array length - 1  i  gt  0  i--    x000D          var j   Math floor Math random      i   1    x000D          var temp   array i   x000D          array i    array j   x000D          array j    temp  x000D        x000D      return array  x000D    x000D   x000D  transforms     x000D             border-left-width      30    margin-left    70    x000D             border-bottom-width    80    x000D             border-right-width     30    x000D             border-top-width       0    margin-top    70    x000D             width                  0    x000D             height                 0    x000D             borderLeftColor        transparent    x000D             borderRightColor       transparent   x000D     x000D  transforms   shuffleArray transforms  x000D   x000D   x000D   x000D      a   click function        border   trigger  click       x000D   function      x000D      var duration   1000 x000D          border   click function     x000D      for   var i 0  i  lt  transforms length  i       x000D            this  x000D            animate transforms i   duration  x000D        x000D         end   x000D    jQuery   x000D   border   x000D      margin  50px  x000D      width  50px  x000D      height  50px  x000D      border-width  50px  x000D      border-style  solid  x000D      border-top-color  green  x000D      border-right-color  yellow  x000D      border-bottom-color  red  x000D      border-left-color  blue  x000D      cursor  pointer x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com color jquery color-2 1 2 min js  gt  lt  script gt  x000D  Click it  lt br gt  x000D   lt div class  border  gt  lt  div gt  x000D   x000D   x000D      All at once version   x000D   x000D      a   click function        border   trigger  click       x000D   function      x000D      var duration   1000 x000D          border   click function     x000D            this  x000D            animate   border-top-width   0              x000D                  border-left-width   30            x000D                  border-right-width   30           x000D                  border-bottom-width   80          x000D                  width   0                         x000D                  height   0                        x000D                      margin-left   100  x000D                      margin-top   150  x000D                  borderTopColor    transparent   x000D                  borderRightColor    transparent   x000D                  borderLeftColor     transparent    duration  x000D         end   x000D    jQuery   x000D   border   x000D      margin  50px  x000D      width  50px  x000D      height  50px  x000D      border-width  50px  x000D      border-style  solid  x000D      border-top-color  green  x000D      border-right-color  yellow  x000D      border-bottom-color  red  x000D      border-left-color  blue  x000D      cursor  pointer x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com color jquery color-2 1 2 min js  gt  lt  script gt  x000D  Click it  lt br gt  x000D   lt div class  border  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Different approach  CSS3 triangles with transform rotate Triangular shape is pretty easy to make using this technique  For people who prefer to see an animation explaining how this technique works here it is     Link to the ANIMATION   How to make a CSS3 triangle  And DEMO   CSS3 triangles made with transform rotate   Otherwise  here is detailed explanation in 4 acts  this is not a tragedy  of how to make an isosceles right-angled triangle with one element   Note 1   for non isosceles triangles and fancy stuff  you can see step 4  Note 2   in the following snippets  the vendor prefixes aren t included  they are included in the codepen demos  Note 3   the HTML for the following explanation is always    lt div class  quot tr quot  gt  lt  div gt    STEP 1   Make a div Easy  just make sure that width   1 41 x height  You may use any techinque  see here  including the use of percentages and padding-bottom to maintain the aspect ratio and make a responsive triangle  In the following image  the div has a golden yellow border  In that div  insert a pseudo element and give it 100  width and height of parent  The pseudo element has a blue background in the following image   At this point  we have this CSS    tr       width  30       padding-bottom  21 27        width   1 41        position  relative      tr  before       content          position  absolute      top  0      left  0      width  100       height  100       background   0079C6     STEP 2   Let s rotate First  most important   define a transform origin  The default origin is in the center of the pseudo element and we need it at the bottom left  By adding this CSS to the pseudo element   transform-origin 0 100   or transform-origin  left bottom  Now we can rotate the pseudo element 45 degrees clockwise with transform   rotate 45deg    At this point  we have this CSS    tr       width  30       padding-bottom  21 27        width   1 41        position  relative      tr before       content          position  absolute      top  0      left  0      width  100       height  100       background   0079C6      transform-origin  0 100               transform  rotate 45deg      STEP 3   hide it To hide the unwanted parts of the pseudo element  everything that overflows the div with the yellow border  you just need to set overflow hidden  on the container  after removing the yellow border  you get    a TRIANGLE    DEMO  CSS    tr       width  30       padding-bottom  21 27        width   1 41        position  relative      overflow  hidden      tr before       content          position  absolute      top  0      left  0      width  100       height  100       background-color   0079C6      transform-origin  0 100       transform  rotate 45deg      STEP 4   go further    As shown in the demo  you can customize the triangles    Make them thinner or flatter by playing with skewX    Make them point left  right or any other direction by playing with the transform orign and rotation direction  Make some reflexion with 3D transform property  Give the triangle borders Put an image inside the triangle Much more    Unleash the powers of CSS3    Why use this technique   Triangle can easily be responsive  You can make a triangle with border  You can maintain the boundaries of the triangle  This means that you can trigger the hover state or click event only when the cursor is inside the triangle  This can become very handy in some situations like this one where each triangle can t overlay it s neighbours so each triangle has it s own hover state  You can make some fancy effects like reflections  It will help you understand 2d and 3d transform properties   Why not use this technique   The main drawback is the browser compatibility  the 2d transform properties are supported by IE9  and therefore you can t use this technique if you plan on supporting IE8  See CanIuse for more info  For some fancy effects using 3d transforms like the reflection browser support is IE10   see canIuse for more info   You don t need anything responsive and a plain triangle is fine for you then you should go for the border technique explained here   better browser compatibility and easier to understand thanks to the amazing posts here

User · Answer

Lets say we have the following div    lt div id  triangle    gt    Now Edit the CSS step-by-step  so you will get clear idea what is happening around  STEP 1   JSfiddle Link     triangle           background  purple          width  150px          height 150PX          border-left  50px solid black           border-right  50px solid black          border-bottom  50px solid black          border-top  50px solid black          This is a simple div  With a very simple CSS  So a layman can understand  Div has dimensions 150 x 150 pixels with the border 50 pixels  The image is attached     STEP 2  JSfiddle Link    triangle       background  purple      width  150px      height 150PX      border-left  50px solid yellow       border-right  50px solid green      border-bottom  50px solid red      border-top  50px solid blue      Now I just changed the border-color of all 4 sides  The image is attached     STEP 3 JSfiddle Link    triangle       background  purple      width  0      height 0      border-left  50px solid yellow       border-right  50px solid green      border-bottom  50px solid red      border-top  50px solid blue      Now I just changed the height  amp  width of div from 150 pixels to zero  The image is attached     STEP 4  JSfiddle    triangle       background  purple      width  0px      height 0px      border-left  50px solid transparent      border-right  50px solid transparent      border-bottom  50px solid red      border-top  50px solid transparent      Now I have made all the borders transparent apart from the bottom border  The image is attached below     STEP 5  JSfiddle Link    triangle       background  white      width  0px      height 0px      border-left  50px solid transparent      border-right  50px solid transparent      border-bottom  50px solid red      border-top  50px solid transparent      Now I just changed the background color to white  The image is attached     Hence we got the triangle we needed

User · Answer

This is an old question  but I think will worth it to share how to create an arrow using this triangle technique  Step 1  Lets create 2 triangles  for the second one we will use the  after pseudo class and position it just below the other    x000D   x000D   arrow      width  0      height  0      border-radius  50px      display  inline-block      position  relative          arrow after          content              width  0          height  0          position  absolute           arrow-up       border-left  50px solid transparent       border-right  50px solid transparent       border-bottom  50px solid  333         arrow-up after           top  5px           border-left  50px solid transparent           border-right  50px solid transparent           border-bottom  50px solid  ccc           right  -50px        x000D   lt div class  arrow arrow-up  gt   lt  div gt  x000D   x000D   x000D   Step 2 Now we just have to set the predominant border color of the second triangle to the same color of the background    x000D   x000D   arrow      width  0      height  0      border-radius  50px      display  inline-block      position  relative          arrow after          content              width  0          height  0          position  absolute           arrow-up       border-left  50px solid transparent       border-right  50px solid transparent       border-bottom  50px solid  333         arrow-up after           top  5px           border-left  50px solid transparent           border-right  50px solid transparent           border-bottom  50px solid  fff           right  -50px        x000D   lt div class  arrow arrow-up  gt   lt  div gt  x000D   x000D   x000D   Fiddle with all the arrows  http   jsfiddle net tomsarduy r0zksgeu

User · Answer

clip-path has the best result for me - works great for divs containers with and without fixed dimensions   triangleContainer      position  relative      width  500px      height  500px      triangleContainer  before      content   quot  quot               position  absolute      background blue      top  0      left  0      width  100       height  100       clip-path  polygon 50  0  0 100   100  100

User · Answer

CSS clip-path  This is something I feel this question has missed  clip-path     clip-path in a nutshell      Clipping  with the clip-path property  is akin to cutting a shape  like a circle or a pentagon  from a rectangular piece of paper  The property belongs to the    CSS Masking Module Level 1    specification  The spec states     CSS masking provides two means for partially or fully hiding portions of visual elements  masking and clipping             Extract from Smashing Magazine        clip-path will use the element itself rather than its borders to cut the shape you specify in its parameters  It uses a super simple percentage based co-ordinate system which makes editing it very easy and means you can pick it up and create weird and wonderful shapes in a matter of minutes     Triangle Shape Example   x000D   x000D  div   x000D    -webkit-clip-path  polygon 50  0   0  100   100  100    x000D    clip-path  polygon 50  0   0  100   100  100    x000D    background  red  x000D    width  100px  x000D    height  100px  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D      Downside  It does have a major downside at the moment  one being it s major lack of support  only really being covered within -webkit- browsers and having no support on IE and only very partial in FireFox     Resources  Here are some useful resources and material to help better understand clip-path and also start creating your own    Clippy - A clip-path generator The W3C Candidate Recommendation File MDN clip-path documentation clip-path Browser Support

User · Answer

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  amp  CSS alone    Using borders  Using linear-gradient  Using conic-gradient  Using transform and overflow  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   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

And now something completely different     Instead of using css tricks don t forget about solutions as simple as html entities    amp  9650    Result     9650   See  What are the HTML entities for up and down triangles

User · Answer

Others have already explained this well  Let me give you an animation which will explain this quickly  http   codepen io chriscoyier pen lotjh  Here is some code for you to play with and learn the concepts   HTML    lt html gt     lt body gt       lt div id  border-demo  gt       lt  div gt     lt  body gt   lt  html gt    CSS     border-width is border thickness    border-demo       background  gray      border-color  yellow blue red green   top right bottom left       border-style  solid      border-width  25px 25px 25px 25px   top right bottom left       height  50px      width  50px      Play with this and see what happens  Set height and width to zero  Then remove top border and make left and right transparent  or just look at the code below to make a css triangle    border-demo       border-left  50px solid transparent      border-right  50px solid transparent      border-bottom  100px solid blue

User · Answer

Try This -   x000D   x000D   triangle   x000D      border-color  transparent transparent red transparent  x000D      border-style  solid  x000D      border-width  0px 200px 200px 200px  x000D      height  0px  x000D      width  0px  x000D    x000D   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Consider the below triangle   triangle       border-bottom 15px solid  000      border-left 10px solid transparent      border-right 10px solid transparent      width 0      height 0      This is what we are given     Why it came out in this shape  The below diagram explains the dimensions  note that 15px was used for the bottom border and 10px was used for left and right     It s pretty easy to make a right-angle triangle also by removing the right border

User · Answer

here is another fiddle     container after       position  absolute      right  0      content          margin-right -50px      margin-bottom  -8px      border-width  25px      border-style  solid      border-color  transparent transparent transparent  000      width  0      height  0      z-index  10      -webkit-transition  visibility 50ms ease-in-out opacity 50ms ease-in-out      transition  visibility 50ms ease-in-out opacity 50ms ease-in-out      bottom  21px     container       float  left      margin-top  100px      position  relative      width  150px      height  80px      background-color   000      containerRed       float  left      margin-top  100px      position  relative      width  100px      height  80px      background-color  red      https   jsfiddle net qdhvdb17

User · Answer

Different approach  With linear gradient  for IE  only IE 10    You can use any angle    x000D   x000D   triangle   x000D      margin  50px auto  x000D      width  100px  x000D      height  100px  x000D     linear gradient    x000D      background  -moz-linear-gradient -45deg   rgba 255 0 0 0  0   rgba 255 0 0 0  50   rgba 255 0 0 1  50   rgba 255 0 0 1  100    x000D      FF3 6     x000D      background  -webkit-gradient linear  left top  right bottom  color-stop 0  rgba 255 0 0 0    color-stop 50  rgba 255 0 0 0    color-stop 50  rgba 255 0 0 1    color-stop 100  rgba 255 0 0 1     x000D      Chrome Safari4     x000D      background  -webkit-linear-gradient -45deg   rgba 255 0 0 0  0  rgba 255 0 0 0  50  rgba 255 0 0 1  50  rgba 255 0 0 1  100    x000D      Chrome10  Safari5 1     x000D      background  -o-linear-gradient -45deg   rgba 255 0 0 0  0  rgba 255 0 0 0  50  rgba 255 0 0 1  50  rgba 255 0 0 1  100    x000D      Opera 11 10     x000D      background  -ms-linear-gradient -45deg   rgba 255 0 0 0  0  rgba 255 0 0 0  50  rgba 255 0 0 1  50  rgba 255 0 0 1  100    x000D      IE10     x000D      background  linear-gradient 135deg   rgba 255 0 0 0  0  rgba 255 0 0 0  50  rgba 255 0 0 1  50  rgba 255 0 0 1  100    x000D      W3C     x000D    x000D   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D    Here is jsfiddle

User · Answer

CSS Triangles  A Tragedy in Five Acts  As alex said  borders of equal width butt up against each other at 45 degree angles     When you have no top border  it looks like this     Then you give it a width of 0          and a height of 0          and finally  you make the two side borders transparent     That results in a triangle

User · Answer

If you want to apply border to the triangle read this  Create a triangle with CSS    Almost all the answers focus on the triangle built using border so I am going to elaborate the linear-gradient method  as started in the answer of  lima fil    Using a degree value like 45   will force us to respect a specific ratio of height width in order to obtain the triangle we want and this won t be responsive    x000D   x000D   tri   x000D    width 100px  x000D    height 100px  x000D    background linear-gradient 45deg  transparent 49 5  red 50    x000D     x000D      To illustrate   x000D    border 1px solid  x000D    x000D  Good one x000D   lt div class  tri  gt  lt  div gt  x000D  bad one x000D   lt div class  tri  style  width 150px  gt  lt  div gt  x000D  bad one x000D   lt div class  tri  style  height 30px  gt  lt  div gt  x000D   x000D   x000D    Instead of doing this we should consider predefined values of direction like to bottom  to top  etc  In this case we can obtain any kind of triangle shape while keeping it responsive   1  Rectangle triangle  To obtain such triangle we need one linear-gradient and a diagonal direction like to bottom right  to top left  to bottom left  etc   x000D   x000D   tri-1  tri-2   x000D    display inline-block  x000D    width 100px  x000D    height 100px  x000D    background linear-gradient to bottom left  transparent 49 5  red 50    x000D    border 1px solid  x000D    animation change 2s linear infinite alternate  x000D    x000D   tri-2   x000D    background linear-gradient to top right  transparent 49 5  red 50    x000D    border none  x000D    x000D   x000D   keyframes change   x000D    from   x000D      width 100px  x000D      height 100px  x000D      x000D    to   x000D      height 50px  x000D      width 180px  x000D      x000D    x000D   lt div class  tri-1  gt  lt  div gt  x000D   lt div class  tri-2  gt  lt  div gt  x000D   x000D   x000D    2  isosceles triangle  For this one we will need 2 linear-gradient like above and each one will take half the width  or the height   It s like we create a mirror image of the first triangle    x000D   x000D   tri   x000D    display inline-block  x000D    width 100px  x000D    height 100px  x000D    background-image  x000D    linear-gradient to bottom right  transparent 49 5  red 50    x000D    linear-gradient to bottom left   transparent 49 5  red 50    x000D    background-size 50 3  100      I use a value slightly bigger than 50  to avoid having a small gap between both gradient   x000D    background-position left right  x000D    background-repeat no-repeat  x000D     x000D    animation change 2s linear infinite alternate  x000D    x000D   x000D   x000D   keyframes change   x000D    from   x000D      width 100px  x000D      height 100px  x000D      x000D    to   x000D      height 50px  x000D      width 180px  x000D      x000D    x000D   lt div class  tri  gt  lt  div gt  x000D   x000D   x000D    3  equilateral triangle  This one is a bit tricky to handle as we need to keep a relation between the height and width of the gradient  We will have the same triangle as above but we will make the calculation more complex in order to transform the isosceles triangle to an equilateral one   To make it easy  we will consider that the width of our div is known and the height is big enough to be able to draw our triangle inside  height  gt   width      We have our two gradient g1 and g2  the blue line is the width of the div  w and each gradient will have 50  of it  w 2  and each side of the triangle sould be equal to w  The green line is the height of both gradient hg and we can easily obtain the formula below    w 2      hg     w   ---  hg    sqrt 3  2    w ---  hg   0 866   w  We can  rely on calc   in order to do our calculation and to obtain the needed result    x000D   x000D   tri   x000D    --w 100px  x000D    width var --w   x000D    height 100px  x000D    display inline-block  x000D    background-image  x000D    linear-gradient to bottom right  transparent 49 5  red 50    x000D    linear-gradient to bottom left   transparent 49 5  red 50    x000D    background-size calc var --w  2   0 5px   calc 0 866   var --w    x000D    background-position  x000D      left bottom right bottom  x000D    background-repeat no-repeat  x000D     x000D    x000D   lt div class  tri  gt  lt  div gt  x000D   lt div class  tri  style  --w 80px  gt  lt  div gt  x000D   lt div class  tri  style  --w 50px  gt  lt  div gt  x000D   x000D   x000D    Another way is to control the height of div and keep the syntax of gradient easy    x000D   x000D   tri   x000D    --w 100px  x000D    width var --w   x000D    height calc 0 866   var --w    x000D    display inline-block  x000D    background  x000D     linear-gradient to bottom right  transparent 49 8  red 50   left  x000D     linear-gradient to bottom left   transparent 49 8  red 50   right  x000D    background-size 50 2  100   x000D    background-repeat no-repeat  x000D     x000D    x000D   lt div class  tri  gt  lt  div gt  x000D   lt div class  tri  style  --w 80px  gt  lt  div gt  x000D   lt div class  tri  style  --w 50px  gt  lt  div gt  x000D   x000D   x000D    4  Random triangle  To obtain a random triangle  it s easy as we simply need to remove the condition of 50  of each one BUT we should keep two condition  both should have the same height and the sum of both width should be 100      x000D   x000D   tri-1   x000D    width 100px  x000D    height 100px  x000D    display inline-block  x000D    background-image  x000D    linear-gradient to bottom right  transparent 50  red 0   x000D    linear-gradient to bottom left  transparent 50  red 0   x000D    background-size 20  60  80  60   x000D    background-position  x000D      left bottom right bottom  x000D    background-repeat no-repeat  x000D     x000D    x000D    x000D   lt div class  tri-1  gt  lt  div gt  x000D   x000D   x000D    But what if we want to define a value for each side  We simply need to do calculation again     Let s define hg1 and hg2 as the height of our gradient  both are equal to the red line  then wg1 and wg2 as the width of our gradient  wg1   wg2   a   I will not going to detail the calculation but at then end we will have   wg2    a   c  -b     2a  wg1   a - wg2 hg1   hg2   sqrt b   - wg1      sqrt c   - wg2      Now we have reached the limit of CSS as even with calc   we won t be able to implement this so we simply need to gather the final result manually and use them as fixed size    x000D   x000D   tri   x000D    --wg1  20px   x000D    --wg2  60px  x000D    --hg 30px   x000D    width calc var --wg1    var --wg2    x000D    height 100px  x000D    display inline-block  x000D    background-image  x000D    linear-gradient to bottom right  transparent 49 5  red 50    x000D    linear-gradient to bottom left   transparent 49 5  red 50    x000D   x000D    background-size var --wg1  var --hg  var --wg2  var --hg   x000D    background-position  x000D      left bottom right bottom  x000D    background-repeat no-repeat  x000D     x000D    x000D   lt div class  tri   gt  lt  div gt  x000D   x000D   lt div class  tri  style  --wg1 80px --wg2 60px --hg 100px    gt  lt  div gt  x000D   x000D   x000D    Bonus  We should not forget that we can also apply rotation and or skew and we have more option to obtain more triangle    x000D   x000D   tri   x000D    --wg1  20px   x000D    --wg2  60px  x000D    --hg 30px   x000D    width calc var --wg1    var --wg2  - 0 5px   x000D    height 100px  x000D    display inline-block  x000D    background-image  x000D    linear-gradient to bottom right  transparent 49  red 50    x000D    linear-gradient to bottom left   transparent 49  red 50    x000D   x000D    background-size var --wg1  var --hg  var --wg2  var --hg   x000D    background-position  x000D      left bottom right bottom  x000D    background-repeat no-repeat  x000D     x000D    x000D   lt div class  tri   gt  lt  div gt  x000D   x000D   lt div class  tri  style  transform skewY 25deg   gt  lt  div gt  x000D   x000D   lt div class  tri  style  --wg1 80px --wg2 60px --hg 100px    gt  lt  div gt  x000D   x000D   x000D   lt div class  tri  style  --wg1 80px --wg2 60px --hg 100px transform rotate 20deg    gt  lt  div gt  x000D   x000D   x000D    And of course we should keep in mind the SVG solution which can be more suitable in some situation    x000D   x000D  svg   x000D   width 100px  x000D   height 100px  x000D    x000D   x000D  polygon   x000D    fill red  x000D    x000D   lt svg viewBox  0 0 100 100  gt  lt polygon points  0 100 0 0 100 100    gt  lt  svg gt  x000D   lt svg viewBox  0 0 100 100  gt  lt polygon points  0 100 50 0 100 100    gt  lt  svg gt  x000D   lt svg viewBox  0 0 100 100  gt  lt polygon points  0 100 50 23 100 100    gt  lt  svg gt  x000D   lt svg viewBox  0 0 100 100  gt  lt polygon points  20 60 50 43 80 100    gt  lt  svg gt  x000D   x000D   x000D

User · Answer

OK  this triangle will get created because of the way that borders of the elements work together in HTML and CSS      As we usually use 1 or 2px borders  we never notice that borders make a 45   angles to each others with the same width and if the width changes  the angle degree get changed as well  run the CSS code I created below    x000D   x000D   triangle   x000D    width  100px  x000D    height  100px  x000D    border-left  50px solid black  x000D    border-right  50px solid black  x000D    border-bottom  100px solid red  x000D    x000D   lt div class  triangle  gt  x000D   lt  div gt  x000D   x000D   x000D    Then in the next step  we don t have any width or height  something like this    x000D   x000D   triangle   x000D    width  0  x000D    height  0  x000D    border-left  50px solid black  x000D    border-right  50px solid black  x000D    border-bottom  100px solid red  x000D    x000D   lt div class  triangle  gt  x000D   lt  div gt  x000D   x000D   x000D    And now we make the left and right borders invisible to make our desirable triangle as below    x000D   x000D   triangle   x000D    width  0  x000D    height  0  x000D    border-left  50px solid transparent  x000D    border-right  50px solid transparent  x000D    border-bottom  100px solid red  x000D    x000D   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D    If you not willing to run the snippet to see the steps  I ve created an image sequence to have a look at all steps in one image

User · Answer

Start with a basic square and borders  Each border will be given a different color so we can tell them apart   x000D   x000D   triangle       border-color  yellow blue red green      border-style  solid      border-width  200px 200px 200px 200px      height  0px      width  0px    x000D   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D   which gives you this   But there s no need for the top border  so set its width to 0px  Now our border-bottom of 200px will make our triangle 200px tall   x000D   x000D   triangle       border-color  yellow blue red green      border-style  solid      border-width  0px 200px 200px 200px      height  0px      width  0px    x000D   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D   and we will get this   Then to hide the two side triangles  set the border-color to transparent  Since the top-border has been effectively deleted  we can set the border-top-color to transparent as well   x000D   x000D   triangle       border-color  transparent transparent red transparent      border-style  solid      border-width  0px 200px 200px 200px      height  0px      width  0px    x000D   lt div class  triangle  gt  lt  div gt  x000D   x000D   x000D   finally we get this

User · Answer

SASS  SCSS  triangle mixin  I wrote this to make it easier  and DRY  to automatically generate a CSS triangle      Triangle helper mixin  by Yair Even-Or      param  Direction   direction - either  top    right    bottom  or  left      param  Color   color  currentcolor  - Triangle color     param  Length   size  1em  - Triangle size  mixin triangle  direction   color  currentcolor   size  1em       size   size 2     transparent  rgba  color  0      opposite   top bottom  right left  left right  bottom top      content        display  inline-block    width  0    height  0    border   size solid  transparent    border-  map-get  opposite   direction  -color   color    margin-   direction   - size      use-case example   span      include triangle bottom  red  10px       Playground page    Important note  if the triangle seems pixelated in some browsers  try one of the methods described here

User · Answer

Taking it one step further  using css based on this I added arrows to my back and next buttons  yes I know its not 100  cross-browser  but slick none the less     x000D   x000D   triangle   x000D    width  0  x000D    height  0  x000D    border-left  50px solid transparent  x000D    border-right  50px solid transparent  x000D    border-bottom  100px solid red  x000D    margin 20px auto  x000D    x000D   x000D   triangle-down   x000D    border-bottom none  x000D    border-top  100px solid red  x000D    x000D   x000D   triangle-left   x000D    border-left none  x000D    border-right  100px solid red  x000D    border-bottom  50px solid transparent  x000D    border-top  50px solid transparent  x000D    x000D   x000D   triangle-right   x000D    border-right none  x000D    border-left  100px solid red  x000D    border-bottom  50px solid transparent  x000D    border-top  50px solid transparent  x000D    x000D   x000D   triangle-after after   x000D    width  0  x000D    height  0  x000D    border-left  5px solid transparent  x000D    border-right  5px solid transparent  x000D    border-bottom  5px solid red  x000D    margin 0 5px  x000D    content     x000D    display inline-block  x000D    x000D   x000D   triangle-after-right after   x000D    border-right none  x000D    border-left  5px solid blue  x000D    border-bottom  5px solid transparent  x000D    border-top  5px solid transparent  x000D   x000D    x000D   x000D   triangle-before before   x000D    width  0  x000D    height  0  x000D    border-left  5px solid transparent  x000D    border-right  5px solid transparent  x000D    border-bottom  5px solid blue  x000D    margin 0 5px  x000D    content     x000D    display inline-block  x000D    x000D   x000D   triangle-before-left before   x000D    border-left none  x000D    border-right  5px solid blue  x000D    border-bottom  5px solid transparent  x000D    border-top  5px solid transparent  x000D   x000D    x000D   lt div class  triangle  gt  lt  div gt  x000D   lt div class  triangle triangle-down  gt  lt  div gt  x000D   lt div class  triangle triangle-left  gt  lt  div gt  x000D   lt div class  triangle triangle-right  gt  lt  div gt  x000D   x000D   lt a class  triangle-before triangle-before-left  href     gt Back lt  a gt  x000D   lt a class  triangle-after triangle-after-right  href     gt Next lt  a gt  x000D   x000D   x000D

User · Answer

The borders use an angled edge where they intersect  45   angle with equal width borders  but changing the border widths can skew the angle       x000D   x000D  div   x000D    width  60px  x000D    border-width  30px  x000D    border-color  red blue green yellow  x000D    border-style  solid  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    Have a look to the jsFiddle   By hiding certain borders  you can get the triangle effect  as you can see above by making the different portions different colours   transparent is often used as an edge colour to achieve the triangle shape

[css] How do CSS triangles work?

Examples related to css

Examples related to geometry

Examples related to polygon

Examples related to css-shapes