Html 在CSS形状中间创建文本

.myButton{
浮动：对；
边框顶部：40px纯红；
左边框：40px实心透明；
右边框：0px实心透明；
宽度：25%；
}

提交

您可以使用

线性渐变

背景。该技术基于设置固定高度，然后应用

填充

等于

高度

乘以

√2

：

.my按钮{
边界：0；
高度：40px；
背景：线性梯度（45度，透明40px，粉红色40px）；
左侧填充：56.5691px；/*40倍√2.≈ 56.5691 */
}

---

Submit

您的问题是，您使用的是上边框而不是背景，因此您的文本自然不会位于形状的中心。您可以使用定位在形状内手动向上移动文本：

.myButton{
浮动：对；
边框顶部：40px纯红；
左边框：40px实心透明；
右边框：0px实心透明；
宽度：25%；
位置：相对位置；
}
.内部{
位置：绝对位置；
顶部：-30px；
左：40px；
}

提交

您可以将文本放入

div

中，并使用

位置：绝对以调整其在分区内的位置。可能重复