要做效果：天猫首页分类导航白色小三角
主要用css设置border的样式
首先看一下，一个普通的设置border情况
<html>
<head>
<title>test </title>
<style type="text/css">
.arrow {
width:50px;
height:50px;
border-style: solid;
border-color: red green red green;
border-width: 60px 60px 60px 60px;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>
效果图
当把上面的样式width和height改为0时
然后在把左边border的宽度该为0
最后把右边border颜色改为白色
白色的三角基本上就出来了。最后再包一层div，底色和三角的上下border颜色一样，
最后样式代码
<html>
<head>
<title>test </title>
<style type="text/css">
.arrow {
position:absolute;
top:30px;
right:0px;
width:0px;
height:0px;
border-style: solid;
border-color: red white;
border-width: 60px 60px 60px 0px;
}
.base{
position:absolute;
width:350px;
height:180px;
background-color:red;
}
</style>
</head>
<body>
<div class="base">
<div class="arrow"></div>
</div>
</body>
</html>
效果：
对于一个div，当width和heigth都设置为0时，这是
若border不为0，则不为0的border就会相交于一点，
每一个border方向上就会形成一个三角形。只留一边
与父元素底色不同，就会呈现三角形效果。
- 大小: 11.1 KB
- 大小: 4.9 KB
- 大小: 3.6 KB
- 大小: 3 KB
- 大小: 3.2 KB
- 大小: 7 KB
分享到：
相关推荐
纯CSS三角箭头,不用图片的。收集于互联网，只为兴趣与学习交流，不作商业用途
主要介绍了CSS三角箭头应用实践,主要分为用来制作对话框箭头和下拉菜单箭头等情况,需要的朋友可以参考下
这是很容易，但我想让提示框上有一个三角形的箭头。可是，一想到这需要使用图片，并且各种颜色，各种方向的箭头要准备无数种，这几乎是一种灾难。幸运的是，MooTools的核心开发着Darren Waddell告诉了我一个非常棒
主要为大家详细介绍了纯CSS绘制三角形箭头图案技术，如何使用:before和:after绘制CSS三角形，感兴趣的小伙伴们可以参考一下
本篇文章主要介绍了CSS3 用border写 空心三角箭头 (两种写法)，非常具有实用价值，需要的朋友可以参考下
css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧
复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=utf-8″ /><...css实现的交互小三角箭头图标</title><style>p{border-color:
演示地址：CSS Triangles Demo 本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements) 最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形...
之前做箭头一直都是用图片，也尝试过用新浪微博用的那种特殊符号“◆”，不过宽高，三角形的大小等都不太好控制，后来发现可以直接用css绘制，非css3，使用常规的border进行绘制，即使在IE6下也可以完美实现
本文介绍的是利用纯CSS的带箭头流程进度条，兼容到IE8，需要的朋友们下面来一起学习学习。 首先写出一个基本的样式。 .cssNav li{ padding: 0px 20px; line-height: 40px; background: #50abe4; display: ...
很多分类信息网站用step menu菜单来提示用户按步骤输入。如58同城的广告,这里在QT里用一个简单办法来实现这种效果
一、CSS盒子模型 盒子包括：margin、border、padding、content 边框交界处呈现平滑的斜线，利用此特点，通过设置各边框宽度和颜色可以得到小三角等。 div元素是块级元素，显示为块框，可以利用它来具体实现。 ...