<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        *

        {

            margin: 0px;

            padding: 0px;

        }

        #show

        {

            margin: 10px auto;

            position: absolute;

            top: 50px;

            left: 50px;

            text-align: center;

        }

        #some

        {

            width: 200px;

            margin-left: 100px;

            text-align: center;

            position: absolute;

            background-color: rgba(, , ,0.6);

            border-radius: 5px;

        }

        #info

        {

            width: 400px;

            height: 300px;

            position: absolute;

        }

        #outarrow

        {

            border-color: transparent transparent #efefef;

            border-style: solid;

            border-width: 16px;

            height: ;

            width: ;

            position: absolute;

            top: 0px;

            left: 184px;

        }

        #innerarrow

        {

            border-color: transparent transparent white;

            border-style: solid;

            border-width: 16px;

            height: ;

            width: ;

            position: absolute;

            top: 0px;

            left: 184px;

            margin-top: 6px;

        }

        #content

        {

            border: 4px solid;

            border-radius: 4px;

            border-color: #efefef;

            width: 400px;

            margin: 32px auto 0px;

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

            #content p

            {

                text-align: left;

                text-indent: 20px;

            }

    </style>

</head>

<body>

    <div id="show">

        <div id="some">下面就是箭头效果</div>

        <div id="info">

            <div id="outarrow"></div>

            <div id="innerarrow"></div>

            <div id="content">

                <h1>使用边界产生箭头</h1>

                <p>要点1：设置盒子的宽高均为0，只设置边界宽度</p>

                <p>要点2：可以通过border-style改变效果</p>

            </div>

        </div>

    </div>

</body>

</html>

显示效果：

css 画箭头的更多相关文章

  1. 使用css画一个箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  3. 用css画图标

    css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...

  4. 菱形实现气泡Bubble，菱形画箭头，菱形画三角形

    菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...

  5. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  6. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  7. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  8. 用css画出三角形

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

  9. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

随机推荐

  1. Web 服务器与应用服务器的区别是什么？

    不太严谨的说法:web服务器就是负责接收用户的Request,然后响应html等给客户浏览器.应用服务器处理一些业务逻辑等. 作者:luo链接:https://www.zhihu.com/questi ...

  2. 不用float也可以让div横向显示

    display: inline-block; vertical-align: top; 就这两个属性,给div设置上,div就不会换行显示啦,而且还不影响横向的其他元素的显示.

  3. vi 命令学习（一）

    行内移动] w word 向后移动一个单词 b back ·向前移动一个单词 行首 ^ 行首,第一个不是空白字符的位置 $ 行尾 [行数移动] gg go 文件顶部 G go 文件末尾 数字gg go ...

  4. Django基础配置

    安装djangopip install Django==1.11.4进入pythonimport django查看版本号django.get_version()创建项目,在合适位置创建一个目录进入你要 ...

  5. 【codeforces 767D】Cartons of milk

    [题目链接]:http://codeforces.com/problemset/problem/767/D [题意] 每个牛奶都有最晚可以喝的时间; 每天喝K瓶牛奶; 你有n瓶牛奶->已知每个牛 ...

  6. Spring Boot学习总结（4）——使用Springloaded进行热部署

    我在开发的时候,总是会及时对自己的程序进行测试,总是频繁的重启web server,容器不烦我们都觉得烦了. dependencys目录下增加: <dependency> <grou ...

  7. 联赛前集训日记Day3

    考试 竟然出了道莫比乌斯函数的应用?? 简直没法玩 刷题 莫比乌斯函数摆在面前,咋能很快改完啊 生活 GGGGGGGGGGG 自己浪过头了,开回家一周 这车翻得猝不及防,然而自己作的,自己受,只是给别 ...

  8. noip模拟赛 伪神

    题目背景 一切就绪 但愿,这样就好 自那之后的五年—— 作为封印持续增大的结果,在我体内积蓄了庞大的光精灵的力量 在幻灯结界里觉醒过来的我,和从封印解放出的德米奥格,就如同字面意思所述的,获得了等同于 ...

  9. [TS-A1487][2013中国国家集训队第二次作业]分配游戏[二分]

    根据题意,设$3n$次比较中胜了$w$次,负了$l$次,平了$d$次,所有场次中胜了$W$次,负了$L$次,平了$D$次.如果一场赢了,那么$w-l$就会$+1$,相同地,$W-L$也会$+1$:如果 ...

  10. Spring MVC-集成（Integration）-集成LOG4J示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_log4j.htm 说明:示例基于Spring MVC 4.1.6. 以下示例说明 ...