Member Avatar for centenond

if triangles are made with borders, how i can put a border in one triangle?

.arrow {
    height:0;
    width:0;
    border:40px solid transparent;
    border-bottom:40px solid black;

}

Thanks

  • 4 Contributors
  • 6 Replies
  • 727 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Alberto Bucur

Dani AI

Generated

Short answer: you cannot add a traditional border to a triangle made from CSS borders. The usual solutions are (A) stack two triangles (outer = border color, inner = fill color) or (B) draw a real triangle with SVG so you can use stroke. already suggested the two-triangle trick; below is a compact CSS-only pattern that uses a pseudo-element so no extra markup is needed. 's SVG approach follows it.

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #000; /* outer = border color */
}

.triangle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;              /* border thickness */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 52px solid transparent;  /* outer-left - thickness */
  border-right: 52px solid transparent;
  border-bottom: 84px solid #fff;       /* outer-bottom - 2*thickness */
}

Notes on the numbers: if thickness = 8px, then inner-left = outer-left - thickness and inner-bottom = outer-bottom - 2*thickness. Center the pseudo-element with left:50% + transform:translateX(-50%). Make sure the .triangle element is position:relative.

If you want a true stroked border (no need to match page background) use SVG:

<svg viewBox="0 0 120 100" width="120" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="60,0 120,100 0,100" fill="#fff" stroke="#000" stroke-width="8" stroke-linejoin="miter"/>
</svg>

SVG scales cleanly, supports genuine stroke/stroke-linejoin and works over patterned/transparent backgrounds. Troubleshooting: ensure parent has position:relative; adjust the pseudo-element offsets if the border looks off; prefer SVG when the background behind the triangle is not a single solid color or when you need crisp scaling/animation.

Recommended Answers

All 6 Replies

Member Avatar for Member #120589 
<head>
<style>
#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
</style>
</head> 
<body>
     <div id="up-triangle"></div>

From: http://www.cssportal.com/css3-shapes/

Member Avatar for centenond

diafol, i know how to do the arrow, Sorry if i did not explain myself enough my main language is spanish :P

What i would like to know is how to put a border in a triangle
In other words how to set a border to a border, since traingles are made of borders

Edited by centenond
Member Avatar for JorgeM

Using this approach doesn't actually create a triangle, it looks like a triangle. So if you are looking for a way to make a triangle that has a "border" instead of a solid color triangle, using this same approach, create two triangles of different colors and one smaller than the other. Then position the smaller one to be placed in the center of the bigger one giving you the effect of one traingle with a border.

Member Avatar for centenond

Thanks got the idea, but are u saying that theres others way to create a triangle in html/css? if so, how?
Very thanks!

Member Avatar for JorgeM

HTML and CSS alone, you are limited. Introducing javascript will provide additional methods.

Member Avatar for Alberto Bucur

Hi,
You can use SVG to create a triangle. SVG tags can be styled using CSS.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.