Results 1 to 1 of 1

Thread: [CSS] Drawing Triangles

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [CSS] Drawing Triangles

    The process of drawing a triangle using only CSS is basically a hack. The way that it works is that imagine that you have a box and the box has borders:
    Name:  box.png
Views: 1117
Size:  520 Bytes

    Notice how each border is cutoff by the next at an angle? Well if you were to shrink the size of said box to 0x0 but keep the size of the borders, they would each meet for a collection of triangles making up a box:
    Name:  box1.png
Views: 1163
Size:  238 Bytes

    To get the desired arrow direction, you would make the background color of the box to transparent and all undesired borders transparent as well. If you wanted to have large triangles, then you would make the border size a larger value. If you wanted to have small triangles, then you would make the border size a smaller value. If you wanted to have the triangles be positioned in a diagonal direction rather than a horizontal/vertical direction or have different style triangles(Scalene or Isosceles) then you'd make one or more of the border sizes smaller than the others.

    The following code demonstrates the concept of drawing triangles only using CSS:

    Markup
    HTML Code:
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    Styling
    Code:
    div {
      background-color: transparent;
      height: 0px;
      width: 0px;
      
      border-top: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid transparent;
    }
    
    .bottom {
      border-bottom-color: red;
    }
    
    .left {
      border-left-color: yellow;
    }
    
    .right {
      border-right-color: blue;
    }
    
    .top {
      border-top-color: green;
    }
    Fiddle: http://codepen.io/anon/pen/ZOYxaw
    Last edited by dday9; Jun 1st, 2016 at 12:12 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width