今天在项目中遇到了如下图的切图要求。

对,重点就是那个小三角提示符号。

html 结构如下

 <div class="wrap">
<div class="up-arr1"></div>
<div class="up-arr2"></div>
</div>

css 结构如下:

.wrap {
position: relative;
}
.up-arr1 {
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 18px solid #CCC;
top: -18px;
left: 85px;
}
.up-arr2 {
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 18px solid #F9F9F9;
top: -17px;
left: 85px;
}

  这个实现不难,网上也有很多例子。但是,我还是把其中的思想再叙述一遍,加深自己的理解

1    父元素设置为相对定位,子元素用绝对定位。将第一个三角形颜色设为和边框颜色相同,第二个三角形颜色与里面背景相同。

  第一个三角形比第二个top值多npx。(这里的n 即为边框的宽度)。

2  保持border-left 和border-right 的宽度相同。因为他们代表了三角形的左右两条边。通过调整这两个边框的宽度可以设置尖角的程度。

用CSS制作小三角提示符号的更多相关文章

  1. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  2. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  3. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

  4. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  5. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  6. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  7. css实现小三角(原理)

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  8. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  9. css制作倒三角

    布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...

随机推荐

  1. List connected users–similar to task manager

    class Program { [DllImport("wtsapi32.dll")] static extern IntPtr WTSOpenServer([MarshalAs( ...

  2. 【剑指offer】求1+2+…+n,C++实现

    原创博文,转载请注明出处! # 题目 # 思路 使用递归计算累加,利用逻辑与的短路特性终止递归.逻辑与的短路特性 : A&&B,A>0时,执行B:A=0时,不执行B. # 代码 ...

  3. 在CentOS 7上安装GitLab

    网上安装gitlab的方法有一堆,由于墙的原因,没有一个能安装成功,最后终于在中文版官网上面找到了RPM包可以下载,进行一键安装: 中文官网地址:http://www.gitlab.cc/ 下载地址为 ...

  4. 类的静态方法@staticmethod

    静态方法 @staticmethod 静态方法是定义在类内部的函数,此函数的作用域是类的内部 说明: 静态方法需要使用 @staticmethod装饰器定义 静态方法与普通函数定义相同,不需要传入se ...

  5. C的文件操作函数

    fgetc(FILE *)意为从文件指针stream指向的文件中读取一个字符,读取一个字节后,光标位置后移一个字节fputc(char,FILE*)将字符ch写到文件指针fp所指向的文件的当前写指针的 ...

  6. tab页面自动跳转原因【在控制ul和li的时候没有细分】

    效果图 存储buy的tab跳转js代码 $(function() { $('.tabPanel ul li').click(function(){ $(this).addClass('hit').si ...

  7. 使用Session防止表单重复提交(不考虑多服务器)

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 原理:  1, ...

  8. BZOJ2342 Shoi2011 双倍回文 【Manacher】

    BZOJ2342 Shoi2011 双倍回文 Description Input 输入分为两行,第一行为一个整数,表示字符串的长度,第二行有个连续的小写的英文字符,表示字符串的内容. Output 输 ...

  9. Could Not Launch Appium Inspector

    环境: macOS High Sierra 10.13.2 appium GUI 1.5.3 出现如上图报错时,尝试将App Path和Device Name勾选,如下图:

  10. SSZipArchive使用详解

    下载SSZipArchive,点击我.或者自己在这里下载. SSZipArchive功能: 解压zip文件 解压密码保护的zip文件 创建zip文件 追加到zip文件 压缩文件 使用一个名字来压缩NS ...