CSS进阶篇--CSS实用技巧制作三角形-优快云博客

本文将指导您如何使用HTML和CSS创建四个不同方向的三角形图标：上箭头、下箭头、左箭头和右箭头。通过简单的代码示例，了解每个箭头的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现如图所示的三角形图标：
图片描述

html代码：

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

css样式：

body{background:#faf7ef;}
div{margin:20px auto}
div.arrow-up {
  width:0px;
  height:0px;
  border-left:50px solid transparent;  
  border-right:50px solid transparent; 
  border-bottom:50px solid #ff0000; 
  font-size:0px;
  line-height:0px;
}
 

div.arrow-down {
  width:0px;
  height:0px;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:50px solid #0000ff;
  font-size:0px;
  line-height:0px;
}
 

div.arrow-left {
  width:0px;
  height:0px;
  border-bottom:50px solid transparent;  
  border-top:50px solid transparent; 
  border-right:50px solid #008000; 
  font-size:0px;
  line-height:0px;
}
 

div.arrow-right {
  width:0px;
  height:0px;
  border-bottom:50px solid transparent; 
  border-top:50px solid transparent; 
  border-left:50px solid #ffff00; 
  font-size:0px;
  line-height:0px;
}

需要demo猛点该文字，百度云盘下载