文档章节

使用border制作的css三角形

The-duke
 The-duke
发布于 2016/10/13 15:28
字数 131
阅读 8
收藏 1

效果 输入图片说明

html结构

<div class="tool-tip-wrapper"> <div class="tool-tip"> 使用border写的三角形 <div class="tip-arrowDown-shadow"></div> <div class="tip-arrowDown"></div> </div> </div>

css代码

.tool-tip-wrapper{position: relative;left: 200px;top: 200px} .tool-tip{ position:absolute; left:-40px; top:-14px; padding:6px 12px; font-size:12px; line-height:1; text-decoration:none; text-align:center; text-shadow:0 0 1px white; white-space:nowrap; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#f9f2ba; border:1px solid #e9d315; color:#5b5316; } .tool-tip .tip-arrowDown-shadow, .tool-tip .tip-arrowDown{ position:absolute; left:90%; bottom:-12px; margin-left:-6px;

width:0;
height:0;
line-height: 0;
border-width:6px;
border-style:solid dashed dashed dashed;
border-color:#e9d315 transparent transparent transparent;

} .tool-tip .tip-arrowDown{ border-top-color:#f9f2ba; } .tool-tip .tip-arrowDown-shadow{ border-width:7px !important; bottom:-14px; margin-left:-7px; }

本文转载自:http://www.cnblogs.com/leejersey/archive/2013/09/08/3308120.html

The-duke
粉丝 32
博文 58
码字总数 16890
作品 0
成都
前端工程师
私信 提问
震惊!?css-border还能这么用!?

利用css中的border制作小三角形 总所周知,元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 CSS border 属性允许规定元素边框的样式、宽度和颜色。 在 HTML 中,我们使用表格来...

尘年往沙
2018/07/30
0
0
基于单个 div 的 CSS 绘图

原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 绘图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合!赞作者的这句话:Restricting your availabl...

justjavac
2014/10/11
513
1
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2018/10/30
0
0
CSS绘制三角形—border法

1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: 实现原理: 首先来看在为元素添加border时,border的样子;假设有如下代码: 效果图: 这是我们平常使...

阿尔卑斯的隆冬
2018/08/31
0
0
制作CSS气泡框

气泡状文本框,是一种很生动的网页设计手段。 它可以用来表示用户的发言。 也可以用来作为特定信息的提示符。 DVD租借网站Netflix,还用它显示碟片的详细信息。 ========================= ...

阮一峰
2010/04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
7
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
14
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
2.9K
24
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
46
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部