使用html+css实现三角标示符号

我们平常打开某个网站的时候,常常会发现网页上很多导航或者指示条会使用一个三角符号去指向内容,效果简洁美观,甚至很多前端面试中也会提及如何在网页上实现一个三角符号,这里给出一个很简单使用的实现方式。

首先看看哪些网站都使用了这种方式:

淘宝(注意到右边那个三角符号)

网易(导航条三角符号应用)

搜狐

这种例子多不胜数,此处不一一举例了。下面说如何实现:

实现方式实际上很简单,主要利用了伪元素和定位来完成:

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            background: red;
            width: 100px;
            height: 100px;
            position: relative;
        }
        .div1:after{
            position: absolute;
            bottom: 0;
            width: 0;
            height: 0;
            left: 50%;
            margin-left: -10px;
            content: " ";
            border-bottom: 10px solid  #000000 ;
            border-left: 10px solid transparent ;
            border-right: 10px solid transparent ;

        }
        .div1:before{
            position: absolute;
            top: -10px;
            width: 0;
            height: 0;
            left: 50%;
            margin-left: -10px;
            content: " ";
            border-bottom: 10px solid  #000000 ;
            border-left: 10px solid transparent ;
            border-right: 10px solid transparent ;

        }
    </style>
</head>
<body>
<div class="div1">
()
</div>
</body>
</html>

这里首先定义一个div,给它加上一个class叫做div1,主要是用来给它自身定义背景,宽高,并且需要加上相对定位,因为它里面的三角符号需要在它的基础上进行绝对定位;

在这个div1 class上面加一个before或者after的伪元素,这个就是三角符号,主要利用了它的border属性,定义三个border,让border-left和border-right透明,让border-top(或border-bottom)非透明,取决于你想将这个三角符号设置成什么颜色。

最后需要给这个三角符号进行绝对定位,如果你要将它放在这个div的最下面,可以设置bottom:0,如果你要做一个导航类的三角让它在div顶部并指向某元素,可以采用负的top值进行实现,其为负的border的宽度,就可以让它和div连在一起。

同时,要设置这个伪元素宽高为0,内容为空,剩下的工作就是调整它的位置了,效果如下:

时间: 2024-10-05 12:49:34

使用html+css实现三角标示符号的相关文章

用CSS制作小三角提示符号

今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 1 <div class="wrap"> 2 <div class="up-arr1"></div> 3 <div class="up-arr2"></div> 4 </div> css 结构如下: .wrap { position: relative; } .up-arr1 { po

css实现三角的一些方法

css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子: css三角形状的制作: css样式: .triangle{ width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid red; }  方法解释:定义 左右两边边框透明,下边框不定义,上边框定义颜色即

TCP的6大标示符号

1.SYN:建立连接 2.ACK:确认 3.FIN:通讯终止 4.RST:异常终止通讯连接 5.URG:紧急数据 6.PSH:发送方通过使用PUSH位来通知接收方将所有收到的数据立即提交给服务器进程,而不需要等待额外数据(将缓存填满)而让数据在缓存中停留!这里所说的数据包括与此PUSH包一起传输的数据以及之前就为该进程传输过来的数据(滞留在缓存中的数据). TCP的6大标示符号,布布扣,bubuko.com

纯CSS小三角制作

无关的知识点 ① background-clip 属性规定背景的绘制区域. 1.padding-box:从padding区域(不含padding)开始向外裁剪背景. 2.border-box:从border区域(不含border)开始向外裁剪背景. 3.content-box:从content区域开始向外裁剪背景. 4.text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果. ② clip auto:对象无剪切rect(<number>|aut

CSS border三角、圆角图形生成技术简介

http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例.我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文还将展示可能并不为众人所知的CSS border圆角生成技术.好了,裹脚布的话就不说了,直接进入正题. 二.CSS bord

纯CSS的三角符号

.triangle{ border-width: 5px 4px 0 4px; border-color: #454A7Btransparent transparent transparent; border-style:solid; height: 0; width: 0; }

纯CSS制作三角(转)

原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/8967012 以前写过一篇纯CSS制作带三角的边框,那篇文章是用HTML特殊字符来制作三角的,今天介绍下,如何用 border 来制作三角. html 代码如下: <div class="arrow-up"></div> <div class="arrow-

css实现三角箭头

像下面的向右三角箭头,只有纯css不需要图片就可以实现了. width:0px;height:0px;border-width:10px 7px 0 7px; border-style:solid;border-color: #ccc transparent transparent transparent; 向下箭头 width:0px;height:0px;border-width:20px 10px 0 10px ; border-style:solid;border-color:#FFF

用css实现三角效果

CSS border原理 一个div或者元素的border并不是我们直观意义上的一条有高度的线,而是一个等高梯形或者三角形(宽高为0时),可以看一下效果: HTML: <div class="arrow1"></div> CSS: .arrow1{ font-size:0; /*默认有高度会撑开,这里清楚高度*/ width:0; height:0; border-width:30px; border-style:solid; border-color:red