<!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. Python星号表达式

    有时候可能想分解出某些值然后丢弃它们,可以使用诸如 _ 或者 ign(ignored)等常用来表示待丢弃值的变量名: record = ('ACME', 50, 123.45, (12, 18, 20 ...

  2. Android—修改button属性

    一般安卓里的普通按钮控件灰灰的,比较单调,我们可以给按钮加上背景图片,或者自定义按钮的圆角,颜色等属性. 下面用代码举例: <Button android:id="@+id/reset ...

  3. How To: set udev rule for setting the disk permission on ASM disks when using multipath on Linux 6.x

    在RHEL6.4上安装11gR2的RAC时,使用了MULTIPATH来聚合绑定多路径的磁盘,并且修改磁盘的权限,赋予grid:asmadmin用户和组. 此时,在安装时可以发现磁盘,日志如下 INFO ...

  4. 初学者对ASCII编码、Unicode编码、UTF-8编码的理解

    最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是 255(二进制 11111111=十进制 255),如果要表示更大的整数,就必须用更多的字节. ...

  5. Flask - WTF和WTForms创建表单

    目录 Flask - WTF和WTForms创建表单 一. Flask-WTF 1.创建基础表单 2.CSRF保护 3.验证表单 4.文件上传 5.验证码 二. WTForms 1. field字段 ...

  6. 【Codeforces 1114B】Yet Another Array Partitioning Task

    [链接] 我是链接,点我呀:) [题意] 让你把数组分成k个连续的部分 使得每个部分最大的m个数字的和最大 [题解] 把原数组降序排序 然后选取前m*k个数字打标记 然后对于原数组 一直贪心地取 直到 ...

  7. hdu6096 String

    String Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others) Problem De ...

  8. CODEVS1079 回家 （最短路）

    真是语死早,题目看了两遍才看懂. 按照题目要求建边,从'Z'开始跑最短路即可. Program CODEVS1079; ..,..] of longint; d:..] of longint; pd: ...

  9. [bzoj1040][ZJOI2008]骑士_树形dp_基环树_并查集

    骑士 bzoj-1040 ZJOI-2008 题目大意:n个骑士,每个骑士有权值val和一个讨厌的骑士.如果一个骑士讨厌另一个骑士那么他们将不会一起出战.问出战的骑士最大atk是多少. 注释:$1\l ...

  10. Linux统计行数命令wc（转）

    Linux wc命令用于计算字数. 利用wc指令我们可以计算文件的Byte数.字数.或是列数,若不指定文件名称.或是所给予的文件名为"-",则wc指令会从标准输入设备读取数据. 语 ...