I surely should know how to do that, but am actually currently struggling how to get such a small, red triangle in the bottom-left corner of a ButtonPlus2 stack… Any hints for me?
Add a Custom Class
in the BP2 settings of for example crn
and then add the following CSS
.crn::after {
position: absolute;
content: "";
z-index: 1;
bottom: 0;
right: 0;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 24px 16px;
border-color: transparent transparent #ff0000 transparent;
}
The border-width determines the width and height of the triangle and the colour is in the border-color statement
P.S. I made it bottom right as per your image despite the title saying bottom left.
Thanks so much, @tav! Working like a charm… :-)
(of course you where right by placing the edge in the bottom right corner according to the image)
How would this code be changed, @tav, to make the triangle appear in one of the other corners ?
TIA
My guess would be to change the bottom to top and the right to left depending on the corner you want it in.
lmao!! What a dim bow I am. Should have put my glasses on!! Thanks
This is the code I use for making the corner appear on the right and on the left side:
.crn-right::after {
position: absolute;
content: "";
z-index: 1;
bottom: 0;
right: 0;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 30px 22px;
border-color: transparent transparent #CA0A16 transparent;
}
.crn-left::after {
position: absolute;
content: "";
z-index: 1;
bottom: 0;
left: 0;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 22px 30px 0;
border-color: transparent transparent #CA0A16 transparent;
}
lol yes thanks. Should have gone to SpecSavers!
That was a complete guess of mine. Guess I can even be right once in a while!
You can generate the various triangle CSS using this little tool if it helps
http://apps.eky.hk/css-triangle-generator/
and then just decide on top
or bottom
and left
or right
in the code above