0
(0)
Actually we can create the “triangle part” in border itself by using the :before or :before
pseudo-element. Check the below codes for reference.
Method 1:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #F3F5F6;
width: 500px;
margin: 0 auto;
padding: 10%;
}
.message {
display: block;
position: relative;
background: #FFFFFF;
padding: 15px;
border: 1px solid #DDDDDD;
margin-top: 20px;
}
.message:after {
content: '';
display: block;
position: absolute;
left: 20px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 10px solid #FFFFFF;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
</style>
</head>
<body>
<h1>Create triangle shape for div Method 1</h1>
<div class="message">
Testing
</div>
</body>
</html>
Method 2:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #F3F5F6;
width: 500px;
margin: 0 auto;
padding: 10%;
}
.message {
display: block;
position: relative;
background: #FFFFFF;
padding: 15px;
border: 1px solid #DDDDDD;
margin-top: 20px;
}
.message:before, .message:after {
content: '';
display: block;
position: absolute;
bottom: 100%;
width: 0;
height: 0;
}
.message:before {
left: 19px;
border: 11px solid transparent;
border-bottom-color: #ddd;
}
.message:after {
left: 20px;
border: 10px solid transparent;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<h1>Create triangle shape for div Method 2</h1>
<div class="message">
Testing
</div>
</body>
</html>
How useful was this post?
Click on a star to rate it!
Average rating 0 / 5. Vote count: 0
No votes so far! Be the first to rate this post.
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?
Total Views:
116
Share