技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS实心三角形是怎样制作出来的

作者:admin    时间:2021-6-27 11:18:54    浏览:

本文用动画的形式一步一步给你呈现CSS实心三角形是怎样制作出来的。

HTML

你可以用一个 div 来制作它们,为每个方向使用一个类。

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

CSS

这个想法是一个宽度和高度为零的盒子,箭头的实际宽度和高度由边框的宽度决定。例如,在向上箭头中,底部边框是彩色的,而左侧和右侧是透明的,这形成了三角形。

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

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

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

execcodegetcode

对于等边三角形,值得指出的是,高度是宽度的 86.6%,所以 (左边宽 + 右边宽) * 0.866% = 底边宽。

相关文章推荐

标签: 三角形  css  css3  css三角形  
x
x
  • 站长推荐