Html 向上三角形，调整CSS中的y位置

嘿，我在CSS中创建了一个三角形，如下所示：

.triangleup{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 7.5px 10px 7.5px；
边框颜色：透明透明#58BE23透明；
显示：内联块；
}

---

这是一个三角形

你可以试着在三角形的底部加上一些边距

.triangleup {
    margin-bottom: 10px;
}

左边距：50像素； 边缘顶部：50px；

---

这用于设置三角形左上角点的位置。

您可以将其与应用位置对齐。因此，代码将是：

.triangleup {
    border-color: transparent transparent #58be23;
    border-style: solid;
    border-width: 0 7.5px 10px;
    display: inline-block;
    height: 0;
    position: relative;
    top: -3px;
    width: 0;
}

.triangleup{
位置：绝对位置；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 7.5px 10px 7.5px；
边框颜色：透明透明#58BE23透明；
显示：内联块；
顶部：0px；
}
h1{
背景颜色：蓝色；
位置：相对位置；
}

这是一个三角形

---

css中的这段代码将解决这个问题

这里的其他答案为您提供了一些可能性，这些可能性将适用于您给出的特定示例，但可能需要根据您的实际字体大小和字体系列稍微调整数字

一个更抽象的解决方案是使用专门用于此目的的CSS属性：

vertical align:text top

，它将为您提供大致正确的对齐方式，无论字体如何

只需设置该属性，就会自动将三角形的底部与文本的顶部对齐

如果要对齐三角形的顶部，则可以按照其他人的建议进行操作，并将相对定位添加到垂直对齐中。由于三角形的高度为10像素，因此可以使用

top:10px

（与

position:relative

）向下推动三角形，使其顶部与文本顶部对齐

最终样式如下所示：

.triangleup {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  top: 10px;
}

---

这是否会让三角形离你想要的位置足够近，这将是决定你是走这条路线还是其他人提出的路线之一的决定性因素。我认为，这种方法更灵活，但精确度稍低。

有两种方法可以做到这一点，即在顶部对齐三角形，使其与剩余文本保持一致

第一-通过将

.triangleup

的位置更改为

位置：相对

，并将

顶部

用作

负值

.triangleup{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 7.5px 10px 7.5px；
边框颜色：透明透明#58BE23透明；
显示：内联块；
位置：相对；/*添加此*/
顶部：-22px；/*添加此*/
}

这是一个三角形

试试这个：

---

这是一个三角形

您希望三角形的大小与小提琴中看到的大小相同吗？使用

边框宽度：0 18px 24px 18px你应该把小提琴上的代码输入你的答案中。插入堆栈片段将是最好的。编辑时，请单击带有括号的纸张图标。ohk谢谢，我是新来的，因此感谢@CJL7500的帮助，无需担心。欢迎
.triangleup {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  top: 10px;
}

.triangleup {
  vertical-align: top;<----------Added
  //More code.........
}