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

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

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. matlab下kmeans及pam算法对球型数据分类练习

    clear all; clc; %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %数据初始化 D ...

  2. Codeforces 932E Team work 【组合计数+斯特林数】

    Codeforces 932E Team work You have a team of N people. For a particular task, you can pick any non-e ...

  3. windows下gvim中文乱码解决方案

    网罗了一些网上的解决windows下gvim中文乱码的解决方案,都试了一遍,可惜都不能完全解决我的所有问题,最后我综合一下网上的两种方案,得到了最后完全解决我的中文乱码问题的方案,配置很简单,就是把下 ...

  4. BW处理链(Process Chain)

    处理链是能自动完成数据的处理和加载等操作的自动化工具.   1.创建处理链 输入T-code:RSPC打开操作界面,或者处理链已经在T-code:RSA1=>Modeling界面下,也可以直接单 ...

  5. pandas 之 set_index

    set_index 很有用 http://stackoverflow.com/questions/10457584/redefining-the-index-in-a-pandas-dataframe ...

  6. iOS7 自己定义动画跳转

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/Liar0606/article/details/26399125 简单介绍 在iOS7系统中,假设你 ...

  7. Eclipse的maven工具

    左侧是组件以及组件依赖树(层级结构):右侧是识别出来的所有的组件:  

  8. (一)Fiddler的介绍和安装

    一.Fiddler的介绍和安装 Fildder是一款免费的web调试代理工具,支持任何浏览器.系统或平台. 官网地址:https://www.telerik.com/fiddler Fiddler原理 ...

  9. 如何将angular-ui-bootstrap的分页组件封装成一个指令

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...

  10. 『备忘录』elasticsearch 去重分页查询

    一开始数据结构设计的很复杂,又是父子关系又是嵌套关系,结果发现不能通过简单的查询得到想要的结果:比如一个商店只出现一件符合条件的商品,弄得查询语句就变成这样了 curl -XPOST http://l ...