文档章节

利用border 产生尖角

HonChy
 HonChy
发布于 2015/03/31 23:19
字数 111
阅读 155
收藏 7
<!DOCType html>
<html>
<head>
<meta charset="utf8" />
<style type="text/css">
    .tip {
        position:relative;
        margin-left:4px;
        background-color:#ff4500;
        padding-left:5px;
        height:18px;
        line-height:18px;
        font-size:12px;
        color:#fff;
    }
    .tip .arrow{
        border-top:4px solid #fff;
        border-bottom:4px solid #fff;
        border-right:4px solid #ff4500;
        line-height:0px;
        position:absolute;
        left:-4px;
        top:5px;
    }
    
</style>
</head>
<body>
    <div class="tip">
        <div class="arrow"></div>
        <label>这是个提示</label>
    </div>
</body>
</html>


效果:

© 著作权归作者所有

共有 人打赏支持
HonChy
粉丝 12
博文 100
码字总数 87679
作品 0
海淀
程序员
【基础】在css中绘制三角形及相关应用

简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适...

毛三十
04/14
0
0
关于负margin在微博的应用

关于负margin在微博的应用: 1、去除多余的margin值 示例截图: 结构: 关键样式: 说明:bar_pictecxt的宽度是“新吧推荐”的宽度,piclist的宽度是浅蓝色块的宽度,内层的宽度大于外层,所...

再见ds
2013/01/07
0
0
Highcharts tooltip自定义形状?

我希望修改Highcharts tooltip的默认形状。我找到一个例子,可以实现带有尖角的tooltip,我试着修改了一下,让它的尖角出现在box的下部,但是尖角没办法很好的指向选中的点。效果如图: 代码...

YueZheng
2013/11/13
1K
3
Unity插件 - MeshEditor(二) 模型网格编辑器(高级)

源码已上传至github,并持续更新,链接请看底部。(本帖跟随github持续更新) 继先前的一篇MeshEditor之后,MeshEditor第二版发布,这次在先前的基础上加入了为模型新增顶点以及删除顶点的功...

qq992817263
2016/06/03
0
0
CSS绘制三角形—border法

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

阿尔卑斯的隆冬
08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ArrayList嘿嘿嘿

数组扩容技术: //扩容技术 将原数组objs类容复制到新数组并且长度为11 Object[] newObjs = Arrays.copyOf(objs,11); 数组比较大那么System.arraycopy比较有优势,因为其使用的是内存复制,省...

熊猫你好
17分钟前
1
0
Android平台下的一个好用的日历库(sxtwl_cpp),支持农历转公历,和公历转农历等功能

python版的sxtwl_cpp传送入口 在build.gradle的allprojects中加入 maven { url 'https://dl.bintray.com/yuangu/sxtwl' } 最终如下面代码所示: allprojects { repositories { ......

元谷
28分钟前
9
0
Redis常用命令

keys 我把这个命令放在第一位,是因为笔者曾经做过的项目,以及一些朋友的项目,都因为使用keys这个命令,导致出现性能毛刺。这个命令的时间复杂度是O(N),而且redis又是单线程执行,在执行k...

谢思华
44分钟前
2
0
关于css宽度分离

所谓宽度分离就是width 属性不与影响宽度的 padding/border(有时候包括 margin)属性共存 例如: .box{width:200px;padding:20px;border:1px solid;} 为何要做宽度分离 一说到分离就是为了好...

莫西摩西
55分钟前
1
0
Linux常用命令

###############常用命令说明############################## cat /proc/version 显示内核的版本 mv dir1 new_dir 重命名/移动 一个目录 rm -rf a.txt b.txt c.txt 删除多个文件 chmod 777 ......

lyle_luo
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部