利用border和伪类画出三角形 ps：好久没写博客了。。。
有一个半月没有写博客了，这段时间，小哥我经历了自入行前端最为黑暗的时期，迷茫，空虚，不想写代码，不想做研究了。连打游戏都没有兴趣，如同行尸走肉一般。还好，毕业论文的初稿完成后，整个时间段最恶心最难熬的部分已经过去了，于是乎，小哥我满血复活，继续在前端中挥舞着大宝剑，砍怪升级。
之前看极客学院的幽灵按钮视频，发现了他们在做tooltip提示框的时候，利用span标签在div下方定位一个小的三角形，至于形状的做法，利用border来实现。具体做法是：以向下三角形为例，将span的border设一个高的值，其颜色设为transparent，并将border-top设为自己需要的颜色，宽和高都设为0px。这样这个三角形就完成了，接下来只要用position定位将它定位到我们设想的位置就可以了。
今天，在做一个移动端应用的时候，又碰到了这个问题，突然想起了之前一道百度的面试题，也是用html和css实现这样的小三角形。这次，我通过after伪类来实现。
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
div:before, div:after{
content: "";
width: 0px;
height: 0px;
position: absolute;
top: 40px;
left: 109px;
border: 10px solid transparent;
border-left-color: #ffffff;
}
div:before{
top: 39px;
border: 11px solid transparent;
border-left-color: #000000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图如下：
这里的三角形，我用了before和after两个伪元素后，将其重叠在一起，并且两个伪类的border值相差为1px，这样正好组成上图这样的效果。
前端路漫漫啊，小哥还要继续努力，把这个方法发布上来是为了跟大家一起分享。更主要是为了给自己记个笔记，免得自己再碰到这种情况时忘记怎么做，让自己早日摆脱前端小白的窘境。
利用border和伪类画出三角形 ps：好久没写博客了。。。的更多相关文章
- CSS画出三角形（利用Border）
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- 利用MetaWeblog API实现XMLRPC写博客功能
Windows Live Writer是一款小巧的写博客的工具,非常方便,甚至网上看到过有的评论称Live Writer是一款最不像微软产品的微软产品. Writer支持MSN Spaces以及Wor ...
- 理解使用before，after伪类实现小三角形气泡框
先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元 ...
- CSS伪类选择器实现三角形
使用css实现常用的三角效果 项目中三角: .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px ...
- 利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
随机推荐
- T-sql编程
T-Sql中的变量都是@符号开头的 以一个@符号开头,叫做“用户声明的变量” 以两个@@开头的叫做"全局变量","系统变量",是由系统来维护的.无需我们维护 - ...
- asp.net 两个页面之前传递数据
.在两个表单之间传递数据 看下面的代码: 对于WebForm1: private void Page_Load(object sender, System.EventArgs e) { ArrayLi ...
- Best Time to Buy and Sell Stock I && II
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- oracle中sql查询语句的执行顺序
查询语句的处理过程主要包含3个阶段:编译.执行.提取数据(sql查询语句的处理主要是由用户进程和服务器进程完成的,其他进程辅助配合) 一.编译parse 在进行编译时服务器进程会将sql语句的正文放入 ...
- jQuery 随滚动条滚动效果 （适用于内容页长文章）
直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 ...
- Linux定时任务Crontab命令详解
linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另 外, 由于使用者自己也可以设置计划任务,所以, ...
- phpcms在自定义模块中的自定义标签分页
如果你是一个经验丰富的phpcms二次开发人员,本篇文章可以忽略不计,因为这里的写法自己都觉得很恶心 今天在开发一个网站自建了一个模块叫做论坛模块,目录名称:luntan ...
- ASP.NET MVC 中使用 UEditor 富文本编辑器
在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是…… 好吧,咱得搞专业点. ...
- jQuery学习-事件之绑定事件（五）
大家应该还记得dispatch方法中有这么一段代码: event = jQuery.event.fix( event ); event的修复是在fix这个方法中的,而在fix中是通过 new jQue ...
- VB.NET让webbrowser控件中JS脚本错误最新方法（2013-09-16）
最近也是在项目中遇到了webbrowser控件中想关闭JS脚本错误窗口的问题,所以经过多次测试,终于用一段高效实用的代码完美解决webbrowser控件中JS脚本错误窗口关闭的问题. 通过创建一个子线 ...