CSS Triangle with border

ttmt · March 21, 2014, 10:48pm

Hi All

I have a demo here to illustrate

www.ttmt.org.uk/triangle

I can create a triangle with CSS like this.


.one{
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #bbb;
	height: 0;
	margin: 0 0 40px 0;
	width: 0;
}

Is it possible to have a triangle like this but with a border in a different color.

I have done it on example page using two div’s as triangles, one smaller than the other and positioned on top.

The way I have done it works but it took three div’s to do it. Is there a simpler way to do this.


<!DOCTYPE html>
<html lang="en">

	<head>	
		<meta charset="UTF-8">

		<style type="text/css">
		  body{
		    margin: 50px;
		  }
		  .one{
      	border-left: 20px solid transparent;
      	border-right: 20px solid transparent;
      	border-top: 20px solid #bbb;
      	height: 0;
      	margin: 0 0 40px 0;
      	width: 0;
		  }
		
		  .wrap{
		    position: relative;
		  }
      .three{
      	border-left: 20px solid transparent;
      	border-right: 20px solid transparent;
      	border-top: 20px solid black;
      	height: 0;
      	width: 0;
      }
      .four{
      	border-left: 16px solid transparent;
      	border-right: 16px solid transparent;
      	border-top: 16px solid #bbb;
      	height: 0;
      	left: 4px;
      	position: absolute;
      	top: 0;
      	width: 0;
      }
		</style>


		<title>Title of the document</title>
	</head>

<body>

  <div class="one"></div>

  <div class="wrap">
    <div class="three">
      <div class="four"></div>
    </div>
	</div>
	
</body>

</html>

ronpat · March 22, 2014, 2:38am

This uses two divs. (I have to believe it can be done with just one div, but I can’t think of how at the moment. )


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<!--
http://www.sitepoint.com/forums/showthread.php?1202404-CSS-Triangle-with-border
2014.03.21 18:48
ttmt
-->
    <title>triangle with border</title>
    <style type="text/css">
body {
    margin:50px;
}
.one {
    outline:1px solid magenta;
    border-left:60px dotted transparent;
    border-right:60px dotted transparent;
    border-top:60px solid #f00;
    width:0;
    height:0;
    position:relative;
}
.two {
    outline:1px solid cyan;
    border-left:40px dotted transparent;
    border-right:40px dotted transparent;
    border-top:40px solid #00f;
    width:0;
    height:0;
    position:absolute;
    top:-52px;
    left:-40px;
}
    </style>
</head>
<body>

<div class="one">
    <div class="two"></div>
</div>

</body>
</html>

Without using positioning properties.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--
http://www.sitepoint.com/forums/showthread.php?1202404-CSS-Triangle-with-border
2014.03.21 18:48
ttmt
-->
    <title>triangle with border</title>
    <style type="text/css">
body {
    margin:50px;
}
.one {
    outline:1px solid magenta;
    border-left:60px dotted transparent;
    border-right:60px dotted transparent;
    border-top:60px solid #f00;
    width:0;
    height:0;
}
.two {
    outline:1px solid cyan;
    border-left:40px dotted transparent;
    border-right:40px dotted transparent;
    border-top:40px solid #00f;
    width:0;
    height:0;
    margin-top:-52px;
    margin-left:-40px;
}
    </style>
</head>
<body>

<div class="one">
    <div class="two"></div>
</div>

</body>
</html>

ralphm · March 22, 2014, 3:27am

Two ways I can think of doing that with one div: using ::before or ::after for the border, or using a combo of background gradient and rotation.Heading out the door now, so can’t test.

ronpat · March 22, 2014, 6:03am

I am too embarrassed to say why I couldn’t make that work earlier.

One div:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<!--
http://www.sitepoint.com/forums/showthread.php?1202404-CSS-Triangle-with-border
2014.03.21 18:48
ttmt
-->
    <title>triangle with border</title>
    <style type="text/css">
body {
    margin:50px;
}
.triangle {
    outline:1px solid pink;
    border-left:60px dotted transparent;
    border-right:60px dotted transparent;
    border-top:100px solid #f00;
    width:0px;
    height:0px;
    position:relative;
}
.triangle:before {
    content:"";
    border-left:45px dotted transparent;
    border-right:45px dotted transparent;
    border-top:75px solid #00f;
    width:0px;
    height:0px;
    position:absolute;
    margin-left:-45px;
    margin-top:-92px;
}
    </style>
</head>
<body>

<div class="triangle"></div>

</body>
</html>

ronpat · March 22, 2014, 8:28am

One more. A downward pointing wedge


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<!--
http://www.sitepoint.com/forums/showthread.php?1202404-CSS-Triangle-with-border
2014.03.21 18:48
ttmt
-->
    <title>triangle with border</title>
    <style type="text/css">
body {
    margin:50px;
}

.triangle {
/*    border:1px solid pink;    /* TEST border. */
    display:block;
    width:120px;
    height:60px;
    position:relative;
    overflow:hidden;
    margin:0 auto;
}
.triangle:before,
.triangle:after {
    content:"";
    width:0px;
    height:0px;
    border-left:60px dotted transparent;
    border-right:60px dotted transparent;
    border-top:60px solid #f00;
    position:absolute;
}
.triangle:after {
    border-top:60px solid #00f;
    bottom:10px;   /* offset sets width of border */
}
    </style>
</head>
<body>

<div class="triangle"></div>

</body>
</html>

ttmt · March 22, 2014, 11:15am

Thanks ronpat, thats perfect.

Can’t believe I didn’t think of that I’m such an idjut

ronpat · March 22, 2014, 6:00pm

We all have our “moments”

Cheers

dresden_phoenix · March 23, 2014, 2:13am

You could do it with of off ANY preexisting content element, for which you can generate at least ONE pseudo element.

The idea here is, similar what ralph was probably going to suggest.

Essentially:

create a pseudo element and make it a block level element, size it to a desired ratio
Put a transparent border around it , with the desired color on two sides
create a diagonal gradient, use background position/ background clip to fine tune.
Rotate to taste!

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			.cont{position: relative;   }
			.cont:before{
			content: '';
			position: absolute;
			bottom:-29px;
			left:29px;
 				background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#207cca), color-stop(50%,#207cca), color-stop(50%,transparent), color-stop(100%,transparent));  
		      height: 50px;
			  width:50px;
			  border:3px solid transparent;
			  border-top:3px solid red;
			  border-left:3px solid red;
			  -webkit-transform: rotate(-135deg);
			  background-clip: content-box;
			  box-shadow:  -3px -3px 2px #555; 
			  text-decoration: none; 
			  color:#fff;
			  display:block;
 			}
 			.cont:hover:before{box-shadow: -1px -1px 0 #fff, -2px -2px 1px #000;}
		</style>
	</head>
	<body>
	<div class='cont'>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
		</body>
</html>

Topic		Replies	Views
CSS Triangle / Arrow HTML & CSS	2	1065	March 3, 2021
How can I create this border? HTML & CSS	16	1791	December 14, 2015
How to create multiple elements using only one div? HTML & CSS	6	3152	October 8, 2014
How to create this border effect using CSS3? HTML & CSS	5	821	September 12, 2015
4 Triangle Square HTML & CSS	27	4045	January 22, 2023

CSS Triangle with border

Related topics