Question

如何仅使用HTML和CSS创建traiangle？

我只需要使用CSS

创建粗三角形

我已经尝试过这段代码：

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

<span class="arrow-up"></span>

Answer 1

您可以尝试使用向上箭头。更多click Here

＆＃13;

  .arrow-up {
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;

    border-bottom: 15px solid blue;
  }

＆＃13;

<div class="arrow-up"></div>

＆＃13;

Answer 2

您可以使用border创建它。检查下面的代码段。

＆＃13;

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black;
}

＆＃13;

<div class="arrow-up"></div>

＆＃13;

Answer 3

使用此代码

.up-aerow {
    border-color: transparent transparent #000;
    border-style: solid;
    border-width: 10px;
    height: 0px;
    width: 0px;
}

<div class="up-aerow"></div>

如何仅使用HTML和CSS创建向上箭头？

3 个答案: