How to put text inside triangle button?

Question

I create triangle button at header of my page, and i would like to put text in button.

Now text is outside button.

My code:

.collapsible {
    position: absolute;
    left: 40%;
}

.triangle {
    font-size: 22px;
    color: #000;
    width: 190px;
    height: 140px;
    border-top: solid 140px #2b2b2b;
    border-left: solid 140px transparent;
    border-right: solid 140px transparent;
    border-bottom: transparent;
    background-color: transparent;
}

<button class="collapsible triangle" id="collapse">Some content</button>

So as u can see text is outside of buuton, how it's possible to set inside button?

in 2019, we should no more use border to create triangles: check this: https://stackoverflow.com/a/49696143/8620333 and see the bottom answers to find the good ways like background, clip-path, svg, etc — Temani Afif, May 30 '19 at 11:55

score 4 · Accepted Answer · answered May 30 '19 at 11:54

.collapsible {
    position: absolute;
    left: 40%;
}

.triangle {
    font-size: 22px;
    color: #000;
    width: 190px;
    height: 140px;
    border-top: solid 140px #2b2b2b;
    border-left: solid 140px transparent;
    border-right: solid 140px transparent;
    border-bottom: transparent;
    background-color: transparent;
}
.collapsible span{
    position: absolute;
    color:red;
    top:-120px;
    left: -30px;
}

<button class="collapsible triangle" id="collapse">
<span>Some content</span></button>

score -1 · Answer 2 · answered May 30 '19 at 11:45

-1

You could do it like this. The only problem is that the triangle is black and the inside text is black too. You should change the triangle color instead to see the text.

<button class="collapsible triangle" id="collapse" value="Some content"></button>

answered May 30 '19 at 11:45

wasanga7

242
1
3
17

Not working, i change text color – qunz666 May 30 '19 at 11:47

How to put text inside triangle button?

2 Answers2