用css打造一个三角形箭头

用css制作一个三角形箭头

三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢，下面我根据我们的实际工作中的经验作了简单的总结。

第一种方案，我们可以通过使用背景图片的方式来处理，这也是我们最经常用的方法。
1）单个切出三角形，我们可以根据UI设计的需求，切出与之相适应的图片，比如 ，我们能方便的根据需求，制作不同高度和颜色的三角形。在使用方面，HTML代码和CSS代码相对简单。如下面图是示例：


这种直接使用背景图片的方法适合我们在三角形包含渐变、纹样、肌理等特殊效果的时候，我们可以设置它的颜色来保证图形边缘与背景色完美一致。缺点是我们需要为每个不同的方向需求制作一个图片，增加了http请求和CSS代码的数量。
由于这种方法比较简单,我们就不做演示了.
2）相比之前，我们怎么做到减少http请求，同时也标示出四个方向的三角形呢？我们可以制作一个菱形 ，通过使用CSS的背景定位来选择与之相匹配的形状。这样我们就能用一个图形，达到四个图形的目的。

<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px"></em><em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat -35px 0;width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px;"></em>    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 -35px;width:67px;height:34px;display:block;position:absolute;bottom:-34px;left:15px;"></em>    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px;"></em></div>

　　

3）方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况，但是在颜色方面确实单一的，我们只能由一种颜色，那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候，我们应该怎么做呢？比如鼠标悬浮的时候由红色变成橙色？那我们就可以使用这种方法，通过正负形的方法，方法二中的方法我们通过一个正形，那下面的例子我们使用一个负形

HTML文件

<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">
    <a class="n_a_1"></a>
    <a class="n_a_2" ></a>
    <a class="n_a_3" ></a>
    <a class="n_a_4"></a>
</div>

CSS文件

.n_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url(http://varhi.com/wp-content/uploads/2011/01/negative_4.gif);background-repeat:no-repeat;position:absolute;display:block;}
a.n_a_1{background-color:#0033CC;background-position:0 0;width:67px;height:34px;top:-34px;left:15px}
a.n_a_1:hover{background-color:#db0085}
a.n_a_2{background-color:#0066CC;background-position:-33px 0;width:34px;height:67px;right:-34px;top:15px;}
a.n_a_2:hover{background-color:#db0085}
a.n_a_3{background-color:#00CCCC;background-position:0 -33px;width:67px;height:34px;bottom:-34px;left:15px;}
a.n_a_3:hover{background-color:#db0085}
a.n_a_4{background-color:#00FFCC;background-position:0 0;width:34px;height:67px;left:-34px;top:15px;}
a.n_a_4:hover{background-color:#db0085}

这样子，我们就能很方便的改变背景颜色来获得不同的颜色的三角形了。
但是我们也发现了另一个问题，那就是当我们希望把这个三角形放到有颜色的背景时，构成其负形的区域颜色也会成为我们的限制，因为我们必须将构成负形的颜色与之相匹配。而且第二种方法和第三种方法中只能实现固定尺寸的正三角形，如果我们想随时改变它形状的话，不使用css3的背景大小属性background-size话（此属性已经已经被Opera\firefox\Safari\Chrome\IE 9），可能下面的方法更适合。

第二种方案，我们不是通过图形图片的方式,而是直接使用标签本身的css属性特点或者字符来进行创作.
1)我们可以使用border 属性来实现，border属性包括宽度、颜色、样式。我们可以改变它的颜色来适应。通过下图我能就能分析出,border属性相关特点:

相关代码：

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
        #boder_arrow{border-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;line-height:0; }
    -->
    </style>
    </head>
<body>
    <div id="boder_arrow"> </div>
</body>
</html>

我们可以改变border不同方向的颜色来找到我们需要的颜色，我们甚至可以通过border-width的修改,创造不同角度的三角形.

是不是上面的通过修改border-width后获得的上面的零件很有意思，可以让我们轻易的节省为创造三角型用掉的那个宝贵的 http请求。
巧思无难事，可能有时候你需要的并不是一个等腰的三角型，比如说我们常见到下面这种图形

那个不是等腰三角形的图形，我们也能通过改变边框的宽度来得到：

2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.
我们经常需要这样的形式:

那我们对这个图形进行分解

那我们先来实现上面分解的图形：

当我们将旋转后的正方形的背景色色值设置为相交盒形相同的色值时,他们就融为一体了.

3)通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性，兼容性更好一些。

◆◆◆◆

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="rage" />
    <title>符号三角</title>
    <style>
    <!--
    .wrap_char{width:150px; height:150px; text-align:center; margin:100px; background:#ccc; position:relative;}
    .a_char,.b_char,.c_char,.d_char{font-size:50px; text-align:center; color:#ccc; position:absolute; z-index:10;line-height:0;line-height:50px;}
    .a_char{left:-4px;bottom:-25px;}
    .b_char{left:-25px; top:-4px;}
    .c_char{top:-25px;right:-4px;}
    .d_char{right:-25px; bottom:-5px;}
    </style>
</head>
<body>
    <div class="wrap_char">
        <span class="a_char">◆</span>
        <span class="b_char">◆</span>
        <span class="c_char">◆</span>
        <span class="d_char">◆</span>
    </div>
</body>
</html>

案例研究：
1）线形的三角形，如下图：

这种图形的实现我们经常依赖于图形实现，其实我们可以通过border属性，将两个三角型的叠加就可以获得相应的效果：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三角形叠加</title>
    <style type="text/css">
    <!--
    .pos_rel{position:relative;_line-height:0;} .pos_rel .icon1{display:block;border-width:9px 9px 9px 0;border-color:transparent #1c7ecf transparent transparent; border-style:solid;position:absolute;left:0;top:0;width:0;height:0;} .pos_rel .icon2{display:block;border-width:9px 9px 9px 0;border-color:transparent #fff transparent transparent; border-style:solid;position:absolute;left:4px;top:-9px;width:0;height:0;} --> </style>
</head>
<body>
    <div class="pos_rel"> <span class="icon1"><span class="icon2"></span></span> </div>
</body>
</html>

这样我们就能获得更漂亮的回复窗口：

2）导航状态

我们也可以通过border创造的三角形来实现：

标签一标签二标签三标签四

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标示导航状态</title>
<style type="text/css">
    #nav_state{height:20px;}
    #nav_state a{width:80px;display:block;text-align:center;padding:2px;line-height:18px;;float:left;background-color:#ccc;margin-right:5px;color:#333;position:relative;text-decoration:none;font-size:12px;}
    #nav_state a span{display:none;}
    #nav_state a.current,#nav_state a:hover{background-color:#000;color:#fff;}
    #nav_state a.current span,#nav_state a:hover span{display:block;width:0;height:0;border-width:8px;border-style:solid;border-color:#000 transparent transparent;position:absolute;top:20px;left:32px;overflow:hidden; }
</style>
 </head>
 <body>
 <div id="nav_state">
    <a href="#" charset="current">标签一<span></span></a> <a href="#">标签二<span></span></a> <a href="#">标签三<span></span></a> <a href="#">标签四<span></span></a>
  </div>
</body>
</html>

上面我们实现的是固定宽度，那如果是自适应宽度的、箭头朝上的呢？

  • 首页
  • 二级栏目
  • 三级栏目可能会比较长
  • 四级栏目

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航箭头朝上标示符</title>
<style type="text/css">
#menu_liquid{height:30px;margin:20px; list-style:none;font-size:12px;} #menu_liquid li{height:30px;line-height:30px;float:left;white-space:nowrap;} #menu_liquid li a{display:block;float:left;height:30px;position:relative;padding:0 12px;background:#777;color:#fff; text-decoration:none;border-right:1px solid #ccc;} #menu_liquid li a span{display:none;} #menu_liquid li a.current,#menu_liquid li a:hover{ background:#000;color:#0099FF;} #menu_liquid li a.current span,#menu_liquid li a:hover span{display:block;width:0;height:0;border-style:solid;border-color: transparent transparent #f0f0f0 transparent;border-width:0 8px 8px;position:absolute;bottom:0;left:50%;margin-left:-4px;overflow:hidden;z-index:0;} #menu_liquid li a em{display:block;text-align:center;font-style:normal;cursor:pointer;}
</style>
</head>
<body>
    <ul id="menu_liquid">
        <li><a href="#"><span></span><em>首页</em></a></li>
        <li><a href="#"><span></span><em>二级栏目</em></a></li>
        <li><a href="#"><span></span><em>三级栏目可能会比较长</em></a></li>
        <li><a href="#"><span></span><em>四级栏目</em><span></span></a></li>
    </ul>
</body>
</html>

这里我们要注意的是什么呢？那就是箭头是绝对定位的，小心箭头过大的时候，将上面的文字覆盖掉了。

上面的只是一些方法的总结，可能并不是最优的方法，最优的实现方法可能还需要具体问题具体分析，就当在此抛砖引玉了。
同时欢迎大家提出相左的看法。

时间： 2024-10-18 19:34:33

用css打造一个三角形箭头的相关文章

Effective前端3：用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

Effective前端(3)用CSS画一个三角形

来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是

Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？

题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部 2.代码的实现 第一步 保证元素是块级元素 第二步 设置元素的边框 第三步 不需要显示的边框使用透明色 示例代码 [css] view plain copy .square{ width:0; height:0; margin:0 auto;

Effective前端1---chapter 2 用CSS画一个三角形

1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></div> <style> .triangle{ margin: 100px; border-top: 40px solid #000; border-bottom: 40px solid #333; border-left: 40px solid #666; border-right: 40px

用纯css创建一个三角形

.triangle{ width: 0;height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 120px solid red; }

html css 设置上下左右三角形箭头

<html> <head> <style> .up { height:0; width:0; border-top:20px solid black; border-left:20px solid transparent; transform:rotate(-45deg); } .down { height:0; width:0; border-bottom:20px solid black; border-right:20px solid transparent; t

CSS画一个三角形

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

用CSS画一个带阴影的三角形的示例代码

1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可 通过 transform 旋转盒子 方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言) 2. 设计 2.1 边框法 html结构 ? 1 2 3 <bod

用css做出来一个三角形

用css做出来一个三角形   <!--不设置宽高  转换行内块  边线设置成宽度--> <div class="triangle"> 三角形复习<span></span></div> /* 相对定位*/ .triangle { position: relative; } /* 绝对定位*/ .triangle span  { position: absolute; top: 5px; display: inline-block