You can create a div into triangle shape easily using some css, check below I have made some changes to the css of div element from the link you provided:
.my-pointer[_ngcontent-wlg-c41] {
height: 0;
width: 0;
margin-left: 46px;
/* transform: rotate(-45deg); */
/* margin-bottom: -20px; */
opacity: 0.5;
/* background-color: Red; */
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid red;
}
To increase the size of the triangle shape just increase the border width from left, right and bottom in above code.
You can read more about this here , Hope this is what you wanted.
Also try to include some code and with your question so that it can be better understood and answered.
You can do something like this:
p {
font-family: Lato;
}
.my-pointer {
margin-left: 30px;
opacity: 0.5;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid red;
}
.bottom-section {
height: 100px;
background-color: yellow;
}
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<div class="my-pointer"></div>
<div class="bottom-section">
Some Content Here
</div>
If you want as little css as possible to achieve this, you can just show the yellow div above the red div by using z-index
and position:relative
.
.red {
z-index: 1;
}
.yellow {
z-index: 2;
position: relative;
}
Try setting .bottom-section
position as relative
.bottom-section {
height: 100px;
background-color: yellow;
position: relative;
}
Closed. This question needs
debugging details . It is not currently accepting answers.
I am trying to create a pointer on top of a div (similar to tooltip)
I tried doing this:
https://stackblitz.com/edit/angular-ivy-fa72tz
Here is what I am trying to achieve:
I want to make the top part of the red div which is rotated 45
degrees keep the red color.
The bottom half of the red div make it transparent.
make the red div exactly half way meet the top border of yellow div.
What am i missing here?