Drawing a triangle with a border

I want to draw a right-pointing triangle in CSS, and the best way I know to do that is using borders:

<div style="
  margin: 0; width: 0; height: 0;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
  border-left: 7px solid #C4C4C4;">
</div>

Now I want to add another border on the right side of it. The color of this triangle is fairly light, so I want a darker border to emphasize it while the vertical side blends in to the background of the element it's flanking.

The only way I can think of to do it is to create a second triangle that's slightly larger than the first, then position the original one on top of it:


<div style="position: absolute; top: 0; left: 1;
  margin: 0; width: 0; height: 0;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
  border-left: 7px solid #C4C4C4;">
</div>

<div style="position: absolute; top: 1; left: 0;
  margin: 0; width: 0; height: 0;
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  border-left: 6px solid #F6F6F7;">
</div>

Can you guys suggest a better way to create this triangle with a border on the 2 right-pointing sides?

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <style media="screen"> body { background-color: #f0f0f0; font: 100% / 150% verdana, arial, helvetica, sans-serif; } h1, h2 { font-size:1em; } .triangle { position:relative; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #000; } .triangle div { position:absolute; top: -8px; left: -9px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #c4c4c4; } </style> </head> <body> <h1>triangles</h1> <h2>HTML and CSS</h2> <div class="triangle"> <div></div> </div> <h2>SVG</h2> <svg height="20" width="20"> <polygon points="0,0 10,10 0,20" fill="#c4c4c4" stroke="#000" stroke-width="1" /> </svg> </body> </html>

Drawing a triangle with a border

csdude55

birdbrain

NickMNS

csdude55

birdbrain

csdude55

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week