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

-3

我需要只使用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>

来源

2017-08-21 M K

对没错，我们可以做到这一点。但首先，你有什么尝试？ –

我已经尝试使用border-radious属性 –

您可以在这里看到的三角形CSS示例https://css-tricks.com/snippets/css/css-triangle/ –

你可以尝试一下本作向上箭头。更多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>

来源

2017-08-21 11:01:19

可以使用border创建它。检查以下片断..

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

来源

2017-08-21 11:01:31

使用此代码

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

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

来源

2017-08-21 11:04:04

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

回答

相关问题