使用border制作的css三角形

2019独角兽企业重金招聘Python工程师标准>>>

效果

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; }

转载于:https://my.oschina.net/wbo0801/blog/758021

使用border制作的css三角形相关推荐

css小技巧 ----- 使用border制作一个小三角形图标
css样式 div {width: 0;height: 0;overflow: hidden;border-width: 7px;border-color: transparent transpare ...
【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角调整宽高大小可以调节三角形形 ...
利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
CSS三角形如何工作？
本文翻译自:How do CSS triangles work? There're plenty of different CSS shapes over at CSS Tricks - Shapes ...
html如何把上边角做成椭圆,使用css3的border-radius和border制作半圆、三角、椭圆等各种图形...
自从有了css3,我们可以制作各种各样的图形了,制作圆角也可以不使用图片了,我们可以使用border-radius可以制作圆角,椭圆等图形.下面我们来看一下如何制作这些的(以下例子请在现代高级浏览器浏 ...
CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
html li 怎么合并,HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）...
1.实现多个div盒子横排列,鼠标点上去后显示border,相连的border合并. :利用position:relative的层级比标准流高(后来居上原则),与margin-left:-1px: 若 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...

使用border制作的css三角形

使用border制作的css三角形相关推荐

最新文章

热门文章