<!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. HDU_1113_字符串处理

    Word Amalgamation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  2. excel求1加到100的和

    强大的数组公式

  3. GatewayWorker + LayIM实现即时聊天

    一.程序目录结构 二.代码展示 附LayIM开发文档:https://www.layui.com/doc/modules/layim.html 1.前端代码 <!DOCTYPE html> ...

  4. Java 之jdbc连接mysql数据库

    package jdbc; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; ...

  5. Redis 之持久化（rdb、aof）

    Redis的持久化有2种方式   1快照  2是日志 测试aof:

  6. cocos自动图集

    对于图像资源,为什么要用图集,cocos官网的解释: 1.合成图集时会去除每张图片周围的空白区域,加上可以在整体上实施各种优化算法,合成图集后可以大大减少游戏包体和内存占用2.多个 Sprite 如果 ...

  7. 本地读取服务器Xml文件及本地读本地的xml

    updateUrl="ServerUrl"(服务器路径) WebClient wc = new WebClient(); Stream stream = wc.OpenRead(u ...

  8. [pytorch学习]1.pytorch ubuntu安装

    看完了Deep Learning with Python,尝试了部分Keras的demo代码. 感觉Keras虽然容易上手,能够快速搭建出一个通用的模型,但是缺乏对底层的控制. 同时,在使用了自己编译 ...

  9. ubuntu16.04　安装 eclipse

    从官网下载 eclipse 的 linux 版本 eclipse-cpp-neon-1a-linux-gtk-x86_64.tar.gz 直接解压就能得到一个可运行的IDE,但是直接点击 eclips ...

  10. hibernate之关于一对一单向，双向关联映射

    [hibernate]之关于一对一单向,双向关联映射 首先我们来看,Hibernate官方对于一对一单向关联的解释: 基于外键关联的单向一对一关联和单向多对一关联差点儿是一样的. 唯一的不同就是单向一 ...