要做效果：天猫首页分类导航白色小三角
主要用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三角箭头是指利用CSS（层叠样式表）的属性来创建箭头形状的图形，常用于网页设计中，比如对话框箭头、下拉菜单箭头等。传统的做法会使用图片作为箭头，但这种方法需要两张图片来处理hover效果，对于只需要一个小...
纯CSS绘制三角形箭头是一种高效且灵活的方法，可以避免使用图像资源，简化网页设计，同时保持良好的浏览器兼容性。这种技术主要利用了CSS边框的特性来创建形状。以下将详细解释如何通过CSS实现不同方向的三角形箭头...
【CSS3箭头菜单效果详解】 在Web开发中，菜单导航是网站布局的重要组成部分，它为用户提供直观的交互路径。随着CSS3技术的发展，我们能够创建更多动态且富有视觉吸引力的菜单效果，其中箭头菜单就是一种常见的设计...
这个“css实现图片（箭头）无缝滚动（向右）”的主题主要涉及到CSS动画和定位技术，我们将深入探讨如何使用CSS来创建这种效果。 首先，要实现图片的无缝滚动，我们需要使用`@keyframes`规则来定义一个动画。这是一...
本主题聚焦于一种常见的网页设计元素——"纯CSS流程步骤箭头样式"，这是一种高效、优雅地呈现序列或流程的方法，无需依赖图像或JavaScript，完全由CSS实现。 首先，"纯CSS"意味着我们仅通过CSS（层叠样式表）来控制...
纯CSS绘制三角形箭头图案是一种高效且灵活的方法，它避免了使用图像资源，从而提高了网页加载速度并简化了设计工作。这种方法利用了CSS边框的透明性质和边框宽度来创建形状。本文将深入探讨如何使用:before和:after...
### CSS制作带箭头的CSS边框 #### 知识点概述 本示例通过纯CSS技术实现了一个带有箭头的边框效果，无需使用任何背景图片，这为网页设计提供了一种轻量级且易于维护的方法。此方法主要利用了CSS中的伪元素以及边框...
在CSS3中，创建空心三角箭头是一个实用的技巧，尤其在构建用户界面或布局时。本篇文章将详细介绍如何利用border属性来实现这一效果，包括两种不同的方法。 ### 第一种写法：利用伪元素 `::before` 或 `::after` 在...
在给定的资源“纯CSS3实现多种箭头绘制及动画.rar”中，我们聚焦于如何利用CSS3的特性来创建各种箭头图形，并实现动态效果。 首先，CSS3中的边框属性（border）是实现箭头的基础。通过巧妙地组合边框宽度、颜色和...
这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的三角形的示例，这对于构建诸如下拉菜单、提示箭头等交互元素时非常有用。 首先，我们要理解CSS是如何生成三角形的。由于CSS无法直接画出几何...
在网页设计中，纯CSS实现箭头是一种常见且实用的技术，可以用来创建各种导航、提示或者装饰元素。这里我们详细探讨如何使用CSS来创建箭头，以及提供的代码示例所展示的方法。 首先，CSS（层叠样式表）是用于描述...
使用CSS3，我们可以实现更多样式上的创新，其中包括使用CSS制作各种图形，如箭头图标。利用CSS3的特性，我们可以抛弃传统的图片图标，转而使用纯CSS代码来创建圆、椭圆和三角形等基本几何图形。 首先，我们来讨论...
在CSS世界中，三角形样式是一种常见的视觉效果，用于创建箭头、指示器或装饰元素。这个主题主要涉及如何利用CSS的基本属性和技巧来构造出看似复杂的几何形状，特别是三角形。下面我们将深入探讨CSS创建三角形的原理...
在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现样式的语言。在CSS中，通过巧妙地利用边框、内边距和背景等属性，我们可以创建出各种几何形状，其中包括三角形。本篇文章将深入探讨如何用...
这个“css小三角的做法与使用”主题深入探讨了如何仅通过CSS来创建各种形状的三角形，并且提供了文本文档和图解以帮助学习者理解。 首先，我们要了解CSS中如何创建三角形的基本原理。这是因为CSS边框不只可以是矩形...
在CSS（层叠样式表）中，创建向左箭头是一种常见的需求，特别是在设计对话框、提示信息（tips）或者指示方向时。标题"css向左箭头"指的是利用CSS来构建一个向左指的箭头图形。描述中提到的"用border写的左右上下箭头...
例如，我们可以创建一个包含多个选项的列表，然后使用CSS将其隐藏，只显示一个带有三角箭头的按钮。当用户点击按钮时，通过JavaScript显示或隐藏列表： ```html 下拉菜单 选项1 选项2 选项3 ``` ```css ...