用CSS制作小三角提示符号
今天在项目中遇到了如下图的切图要求。
对,重点就是那个小三角提示符号。
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制作小三角提示符号的更多相关文章
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
- CSS制作小旗子与小箭头
CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- CSS的小三角
上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...
- css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- CSS实现小三角小技巧
<style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...
- css制作倒三角
布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...
随机推荐
- matlab下kmeans及pam算法对球型数据分类练习
clear all; clc; %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %数据初始化 D ...
- 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 ...
- windows下gvim中文乱码解决方案
网罗了一些网上的解决windows下gvim中文乱码的解决方案,都试了一遍,可惜都不能完全解决我的所有问题,最后我综合一下网上的两种方案,得到了最后完全解决我的中文乱码问题的方案,配置很简单,就是把下 ...
- BW处理链(Process Chain)
处理链是能自动完成数据的处理和加载等操作的自动化工具. 1.创建处理链 输入T-code:RSPC打开操作界面,或者处理链已经在T-code:RSA1=>Modeling界面下,也可以直接单 ...
- pandas 之 set_index
set_index 很有用 http://stackoverflow.com/questions/10457584/redefining-the-index-in-a-pandas-dataframe ...
- iOS7 自己定义动画跳转
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/Liar0606/article/details/26399125 简单介绍 在iOS7系统中,假设你 ...
- Eclipse的maven工具
左侧是组件以及组件依赖树(层级结构):右侧是识别出来的所有的组件:
- (一)Fiddler的介绍和安装
一.Fiddler的介绍和安装 Fildder是一款免费的web调试代理工具,支持任何浏览器.系统或平台. 官网地址:https://www.telerik.com/fiddler Fiddler原理 ...
- 如何将angular-ui-bootstrap的分页组件封装成一个指令
准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...
- 『备忘录』elasticsearch 去重分页查询
一开始数据结构设计的很复杂,又是父子关系又是嵌套关系,结果发现不能通过简单的查询得到想要的结果:比如一个商店只出现一件符合条件的商品,弄得查询语句就变成这样了 curl -XPOST http://l ...