<!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. Fedora 和 RedHat 以及 SUSE 中 YUM 工具的使用

    参考博客:https://www.cnblogs.com/good-study/p/9928587.html 一.yum命令概述: 1.简介: yum命令时在Fedora和RedHat以及SUSE中基 ...

  2. 在iOS项目中嵌入RN代码

    1:在项目跟目录下创建一个ReactComponent文件夹.目录结构如下: 2: 在ReactComponent文件夹下新建一个 package.json 文件 { "name" ...

  3. PAT (Advanced Level) Practice（更新中）

    Source: PAT (Advanced Level) Practice Reference: [1]胡凡,曾磊.算法笔记[M].机械工业出版社.2016.7 Outline: 基础数据结构: 线性 ...

  4. centOS防火墙

    默认防火墙firewall #停止firewall systemcl stop firewall.service #禁止firewall开机启动 systemctl disable firewall. ...

  5. Django REST framework 渲染器、版本

    渲染器.版本: # settings.py REST_FRAMEWORK = { "DEFAULT_RENDERER_CLASSES": [ "rest_framewor ...

  6. Linux系统学习之 一：新手必须掌握的Linux命令1

    2018-10-03 16:04:12 一.常用系统工作命令 1.wget 命令 作用:用于在终端中下载网络文件. 格式:wget [参数] 下载地址 参数及作用: -b : 后台下载模式 -d:显示 ...

  7. 基于supervisor秒级Laravel定时任务

    背景介绍 公司需要实现X分钟内每隔Y秒轮训某个接口,Linux自带的crontab貌似只精确到分钟,虽然可以到精确到秒,但是并不满足需求. 选型 公司项目都是 基于 Laravel 框架,所以这个没得 ...

  8. 并发通信Manage，队列， 互斥锁

    目录 Manage 队列  先入先出 互斥锁 Manage 进程间的通信是被限制的 from multiprocessing import Process a = 1 def func(): glob ...

  9. Haybale Guessing

    Haybale Guessing Time Limit: 1000MS   Memory Limit: 65536K       Description The cows, who always ha ...

  10. poj 2031

    #include<stdio.h> #include<math.h> #include<stdlib.h> #define N 200 double co(doub ...