Question

我在页面标题处创建三角形按钮，我想在按钮中添加文字。

现在文本在按钮外部。

我的代码：

.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>

因此，当您看到文本在buuton之外时，如何在按钮内部设置？

Answer 1

.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>

Answer 2

您可以这样做。唯一的问题是三角形为黑色，内部文本也为黑色。您应该改为更改三角形的颜色以查看文本。

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

如何将文字放在三角形按钮内？

2 个答案: