有一个半月没有写博客了，这段时间，小哥我经历了自入行前端最为黑暗的时期，迷茫，空虚，不想写代码，不想做研究了。连打游戏都没有兴趣，如同行尸走肉一般。还好，毕业论文的初稿完成后，整个时间段最恶心最难熬的部分已经过去了，于是乎，小哥我满血复活，继续在前端中挥舞着大宝剑，砍怪升级。

　　之前看极客学院的幽灵按钮视频，发现了他们在做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：好久没写博客了。。。的更多相关文章

  1. CSS画出三角形（利用Border）

    画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  6. 利用MetaWeblog API实现XMLRPC写博客功能

    Windows Live Writer是一款小巧的写博客的工具,非常方便,甚至网上看到过有的评论称Live Writer是一款最不像微软产品的微软产品. Writer支持MSN Spaces以及Wor ...

  7. 理解使用before，after伪类实现小三角形气泡框

    先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元 ...

  8. CSS伪类选择器实现三角形

    使用css实现常用的三角效果 项目中三角: .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px ...

  9. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

随机推荐

  1. js 去重 字符串 [123123,123123,345435,33467,45645,343467,879,45645]

    function unique(dislodgeArr) { var ret = [] var hash = {} var datasource = new Array(); var array= d ...

  2. IE下图片切换的时候，图片总是切换不成功---根本问题是IE缓存图片

    作为WEB设计者,为了在网页展示上加强用户体验,经常会利用图象载入显示状态方法,这自然需要Image对象的onload事件. 在firefox浏览器下完成开发后,可是在IE浏览器中进行调试总不能被调用 ...

  3. ubuntu下nvm,node以及npm的安装与使用

    一:安装nvm 首先下载nvm,这里我们需要使用git,如果没有安装git,可以使用 sudo apt-get install git 来安装 git clone https://github.com ...

  4. 几个Python oj的网站

    http://www.rqnoj.cn/ http://www.pythontip.com/

  5. Windows下的窗口程序

    再进一步. . .model flat,stdcall option casemap:none include Windows.inc include user32.inc includelib us ...

  6. hdu 4707 Pet hdu 2013 Asia Regional Online —— Warmup

    一道简单的搜索题目,建一个树,根节点是 0 ,连接的两个节点的距离是 1 ,求 到 根节点长度是2的节点的个数. #include<stdio.h> #include<string. ...

  7. Android Handler之使用小结

    在android开发中,使用Handler处理各种消息机制. Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Me ...

  8. PHP中简单的图形处理

    PHP中简单的图形处理 计应134凌豪 1.加载GD库 GD库是一个开放的动态创建图像.源代码公开的函数库,可以从官方网站http://www.boutell.com/gd处下载.目前,GD库支持GI ...

  9. php 截取字符串

    /** * 方法库-截取字符串-[该函数作者未知] * @param string $string 字符串 * @param int $length 字符长度 * @param string $dot ...

  10. A Byte of Python 笔记（3）运算符和表达式

    第5章 运算符与表达式 大多数语句(逻辑行)都包含表达式.例子,如 2 + 3.一个表达式可以分解为运算符和操作数. 运算符 运算符 名称 说明 例子 + 加 两个对象相加 3 + 5得到8.'a' ...