文档章节

利用border 产生尖角

HonChy
 HonChy
发布于 2015/03/31 23:19
字数 111
阅读 155
收藏 7
点赞 0
评论 0
<!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

css border画图

  css border属性竟然可以用来画图,今天项目中遇到该问题,借此有机会深入了解了下。   css border属性在我的印象当中只是方方正正的东西,无非就是增加边框的宽度,变换边框的颜色,因...

吟啸_徐行 ⋅ 2014/07/17 ⋅ 0

关于负margin在微博的应用

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

再见ds ⋅ 2013/01/07 ⋅ 0

Highcharts tooltip自定义形状?

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

YueZheng ⋅ 2013/11/13 ⋅ 3

Unity插件 - MeshEditor(二) 模型网格编辑器(高级)

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

qq992817263 ⋅ 2016/06/03 ⋅ 0

深入理解BFC和Margin Collapse

深入理解BFC和Margin Collapse BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,...

飛飛飛jjs ⋅ 2017/06/06 ⋅ 0

深入理解BFC和Margin Collapse.

BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看...

邓含月 ⋅ 2014/02/27 ⋅ 0

巧用CSS的Border属性制作特效菜单

许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮;鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果。你是否...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

IE6的兼容问题

1.文档类型的声明。 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象; 解决办法:书写文档声明。 2.不同浏览器当中,很多的标签的默认样式不同,如...

望夜的星空 ⋅ 2017/11/02 ⋅ 0

从css盒子与定位到布局

css盒子模型 原理:padding,border,margin三者构成一个盒子。 图片来自网络 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内...

黑天很黑 ⋅ 2017/01/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 24分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 25分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 26分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 40分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 45分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 47分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 47分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 48分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 48分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 49分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部