Draw Triangle or Arrow Using DIV ::after CSS HTML
#divid::after{
position:absolute;
border-top:25px solid #f00;
border-left:25px solid transparent;
border-right:25px solid transparent;
border-bottom:25px solid transparent;
content:'';
display:inline-block;
border-right-width:25px;
top:50px;
left:25px;
box-sizing:border-box;
}
example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#id1::after{
position:absolute;
border-top:25px solid #f00;
border-left:25px solid transparent;
border-right:25px solid transparent;
border-bottom:25px solid transparent;
content:'';
display:inline-block;
border-right-width:25px;
top:50px;
left:25px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="id1"></div>
</body>
</html>
Demo:
No comments:
Post a Comment