Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Center Triangle at Bottom of Div in HTML with CSS
To create a triangle at the center and bottom of a <div>, you can use the CSS ::after pseudo-element with the border trick. The triangle is formed by setting a colored top border and transparent left and right borders on a zero-width, zero-height element. It is then positioned at the bottom center of the parent div.
How the CSS Triangle Trick Works
When you set borders on an element with zero width and height, the borders meet at angles and form triangular shapes. By making only the top border visible (colored) and the left and right borders transparent, you get a downward-pointing triangle. The key CSS properties for centering it are −
-
top: 100%− Places the triangle just below the parent div. -
left: 50%− Moves it to the horizontal center. -
margin-left: -50px− Shifts it back by half the triangle's width to perfectly center it (the triangle width equals the left + right border widths).
Complete Working Example
The following example creates a div with a centered downward-pointing triangle at its bottom edge ?
Example
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
position: relative;
width: 300px;
padding: 20px;
background-color: #e15915;
color: white;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
}
.demo::after {
content: "";
position: absolute;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
}
</style>
</head>
<body>
<div class="demo">
Tooltip with Triangle
</div>
</body>
</html>
This produces an orange div with a downward-pointing triangle centered at its bottom, commonly used for tooltip or speech-bubble designs.
Adjusting the Triangle Size
To change the triangle size, adjust the border widths. For a smaller triangle, reduce all three border values equally and update the margin-left to match −
.demo::after {
content: "";
position: absolute;
border-top: solid 20px #e15915;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
top: 100%;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
}
The margin-left must always be the negative of the border-left width to keep the triangle centered.
Conclusion
Use the CSS border trick on an ::after pseudo-element to create a centered triangle at the bottom of a div. Position it with top: 100% and left: 50%, then offset with a negative margin-left equal to half the triangle's total width.
983 Views
