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
  • 682 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Alberto Bucur
Member Avatar for diafol 
<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.