Menu
I have a simple div on a page:
<div>Some Text</div>
Is it possible with CSS, to make something like this:
306
asked Dec 02 '25 09:12
You can use this code to make a similar arrow
<div class="arrow_box">Arrow</div>.arrow_box {
position: relative;
background: #20d568;
border: 10px solid #ffffff;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(32, 213, 104, 0);
border-left-color: #20d568;
border-width: 70px;
margin-top: -70px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 84px;
margin-top: -84px;
}There is even a website to produce similar snippet like the one mentioned above. Hope this helps!
99
Here is the CSS and HTML markup you need to create this effect in your own project.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>title</title>
<link>
<style type="text/css">
#base {
border: 3px solid #ccc;
background: red;
display: inline-block;
height: 30px;
position: relative;
width: 50px;
padding: 10px 0px 0px 10px;
}
#base:before {
border-bottom: 22px solid transparent;
border-left: 19px solid #ccc;
border-top: 22px solid transparent;
content: "";
height: 0;
right: -22px;
position: absolute;
top: -2px;
width: 0;
}
#base:after {
border-bottom: 20px solid transparent;
border-left: 17px solid red;
border-top: 20px solid transparent;
content: "";
height: 0;
right: -17px;
position: absolute;
top: 0px;
width: 0;
}
</style>
</head>
<body>
<div id="base" >
NEXT
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With