How to create the UP Arrow using only HTML and CSS?

2018-07-02 02:30:26

This question already has an answer here:

How do CSS triangles work? 18 answers

You can try this for Up arrow. More click Here

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

    border-bottom: 15px solid blue;
  }

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

You can create it using border . check snippet below..

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

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

使用此代码

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

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

链接地址: http://www.djcxy.com/p/89498.html

上一篇: 你好，我怎样才能使用CSS绘制一个三角形？

下一篇: 如何仅使用HTML和CSS创建UP箭头？