Welcome to WebmasterWorld Guest from 3.93.74.227

Forum Moderators: not2easy

Message Too Old, No Replies

Drawing a triangle with a border

     
4:05 am on Apr 3, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
8:57 am on Apr 3, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there csdude55,
svg is another possibility...



<!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>


birdbrain
12:36 pm on Apr 3, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2740
votes: 839


Here:
[css-tricks.com...]

But I agree with bridbrain, use SVG. If you remove the in-line styling and add an id or class to the polygon tag then you can use css to style the triangle.
5:12 pm on Apr 3, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


I appreciate that, guys :-) But it's my understanding that only the newest browsers support this, am I right? I did a quick Google and it looks like IE 11 is the first IE to support it.

If that's the case then I'm not sure it will work for me, I still have traffic going back to IE 7! With the majority of IE users having IE 9 (which I guess is because that's the highest that Win7 will support).

If the browser doesn't support it then will it just ignore it?
7:05 pm on Apr 3, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there csdude55.
Windows 7's latest and final browser is actually IE11. ;)


birdbrain
1:49 am on Apr 4, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


I just tried to update again, and it requires SP1 on Windows 7... maybe that's why we have so much IE9 traffic? I dunno, weird.
9:03 am on Apr 4, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there csdude55,
for security reasons, you really should keep your Windows 7 updated. ;)

They come out on a monthly basis.

Get SP1 for Windows 7 [google.co.uk]



birdbrain