•
Triangle Down •
Triangle Left •
Triangle Right
•
Triangle Top-Left •
Triangle Top-Right •
Triangle Bottom-Left
•
Triangle Bottom-Right
Various
triangle shapes with CSS, created only with a sinlge DIV tag and a few CSS properties.
Triangle Up
Code:
<style type="text/css">
#triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
</style>
<div id="triangleup"><br/><br/><br/>>UP</div>
Demo:
Triangle Down
Code:
<style type="text/css">
#triangledown {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
/* For the content in triangle */
#triangledown div{ margin:-85px 0 0 -20px; }
</style>
<div id="triangledown"><div>DOWN</div></div>
Demo:
Triangle Left
Code:
<style type="text/css">
#triangleleft {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid blue;
}
/* For the content in triangle */
#triangleleft div{ margin:-10px 0 0 25px; }
</style>
<div id="triangleleft"><div>LEFT</div></div>
Demo:
Triangle Right
Code:
<style type="text/css">
#triangleright {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid blue;
}
/* For the content in triangle */
#triangleright div{ margin:-10px 0 0 -85px; }
</style>
<div id="triangleright"><div>RIGHT</div></div>
Demo:
Triangle Top-Left
Code:
<style type="text/css">
#triangletopleft {
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 50px solid transparent;
}
</style>
<div id="triangletopleft">...</div>
Demo:
Triangle Top-Right
Code:
<style type="text/css">
#triangletopright {
width: 0;
height: 0;
border-top: 100px solid blue;
border-left: 50px solid transparent;
}
</style>
<div id="triangletopright">...</div>
Demo:
Triangle Bottom-Left
Code:
<style type="text/css">
#trianglebottomleft {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 50px solid transparent;
}
</style>
<div id="trianglebottomleft">...</div>
Demo:
Triangle Bottom-Right
Code:
<style type="text/css">
#trianglebottomright {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 50px solid transparent;
}
</style>
<div id="trianglebottomright">...</div>
Demo:
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span><img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;#id {
font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()$(document).ready(function() {
$(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};function fname($a, $b) {
echo $a * $b;
}