I’m trying to add a css triangle at the top of my div. I was able to find and implement with css an equilateral triangle, but I really don’t want something that tall… in other words I want the triangle to be about twice as wide and half as tall so it’s much more subtle.
here is a codepen of what I’ve got.
https://codepen.io/aaron4osu/pen/KKgdqwj
Any ideas?
PaulOB
December 2, 2020, 12:26pm
2
Just play around with the border settings to change width and height of the triangle.
To reduce the height change the border-top:
border-top: solid 25px #f2e1dc; /* Creates the notch */
e.g.
.pink_arrow:after {
content:''; /* Required to display content */
position: absolute; /* Sets the position absolute to the top div */
top: 0;
left: 50%;
margin-left: -50px; /* Set margin equal to border px */
width: 0;
z-index:1;
height: 0;
border-top: solid 25px #f2e1dc; /* Creates the notch */
border-left: solid 50px transparent; /* Creates triangle effect */
border-right: solid 50px transparent; /* Creates triangle effect */
}
Tov change the width change the left and right borders.
system
Closed
March 3, 2021, 7:26pm
3
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.