How to add a small triangle in the bottom-left corner of a ButtonPlus2 stack?

Big White Duck
1

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?

14

2

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

5 Likes
3

P.S. I made it bottom right as per your image despite the title saying bottom left.

4

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)

5

How would this code be changed, @tav, to make the triangle appear in one of the other corners ?

TIA

6

My guess would be to change the bottom to top and the right to left depending on the corner you want it in.

7

lmao!! What a dim bow I am. Should have put my glasses on!! Thanks

2 Likes
8

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;
}
2 Likes
9

lol yes thanks. Should have gone to SpecSavers!

10

That was a complete guess of mine. Guess I can even be right once in a while!

1 Like
11

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

4 Likes