<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <style>

        .tip {

            position: relative;

            background-color: deepskyblue;

            margin: 20px auto;

            width: 246px;

            height: 43px;

            line-height: 43px;

            color: white;

            text-align: center;

            border-radius: 10px;

            font-family: sans-serif;

        }

        .tip:after {

            content: '';

            position: absolute;

            width: 0;

            height: 0;

            border: 8px solid;

        }

        .top:after {

            border-bottom-color: deepskyblue;

            left: 50%;

            bottom: 100%;

            margin-left: -15px;

        }

        .right:after {

            border-left-color: deepskyblue;

            left: 100%;

            top: 50%;

            margin-top: -7px;

        }

        .bottom:after {

            border-top-color: deepskyblue;

            top: 100%;

            left: 50%;

            margin-left: -15px;

        }

        .left:after {

            border-right-color: deepskyblue;

            top: 50%;

            right: 100%;

            margin-top: -9px;

        }

    </style>

</head>

<body>

    <div class="tip top">top</div>

    <div class="tip bottom">bottom</div>

    <div class="tip left">left</div>

    <div class="tip right">right</div>

</body>

</html>
 

css 绘制对话框三角符号的更多相关文章

  1. css绘制倒三角

    <style> i{ border-left: 5px solid transparent; border-right: 5px solid transparent; border-top ...

  2. CSS绘制小三角

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用css实现三角符号

    关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...

  4. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  5. 用CSS绘制三角形

    其实用HTML CSS绘制三角行 是非常简单的 ,我在网上看了不少人写的博客,里面写的好复杂样子,反正我是看的云里雾里的,说实话是挺简单的. 首先提出一段代码: <!DOCTYPE html&g ...

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

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

  7. 用CSS绘制实体三角形

    用CSS绘制实体三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: .box { width: 0; height: 0; border-width: 100px; borde ...

  8. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

随机推荐

  1. Linux下漏洞提权

    Linux下的漏洞提权 linux下一般都是系统漏洞提权,分为以下几个步骤:

  2. 元素操作（sizing,尺寸获取，设值，偏移算法，坐标算法）

    css3的Sizing Box-sizing是css3的box属性之一,遵循css的boxmodel原理,css中box model是分为两种,第一种是w3c的标准模型,另一种是ie的传统模型,他们相 ...

  3. VHDL学习之模块调用

    http://wenku.baidu.com/link?url=SsRPUVQAOKDR8yWfDhQlceCwfZQkI-KQMLFKTDGAh3KAPr2NwEgvj0d_EZjdnsB99Upp ...

  4. LR手动关联新手总结

    最近学习LoadRunner的时候深刻体会:新手入门真心不容易啊 今天一直在纠结LoadRunner的手动关联问题,之前刚开始看书的时候就看到了,不过当时想先放放,后面来细细研究, 今天看的时候在网上 ...

  5. Visual Studio Code中文文档（一）-快速入门

    Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对J ...

  6. ios基础篇（二十八）—— UITableView的上拉加载

    本文主要展示一个demo实现UITableView的上拉加载数据: 先看看效果图: 接着上拉,加载更多数据: 主要实现的效果是在我们上拉结束拖拽之后,开始加载数据,数据加载的过程中有滚动轮提示用户正在 ...

  7. Socket通信 简单实现私聊、群聊（dos命令下）

    很久以前的一个Demo,这里服务器只做转发功能,根据ID地址和端口号来标识身份,群聊和私聊只是简单实现, 服务器代码如下: import java.util.*; import java.io.*; ...

  8. [转载]Python 元组、列表、字典、文件

    python的元组.列表.字典数据类型是很python(there python is a adjective)的数据结构.这些结构都是经过足够优化后的,所以如果使用好的话,在某些area会有很大的益 ...

  9. expdp/impdp

    1.c:\>sqlplus user1/password@db2.sql>create directory dmpdp as 'C:\data';本地创建文件夹,然后dmp文件放到这个文件 ...

  10. Android中的几种解析XML文件的类

    Ø DOM解析 优点: 1.XML树在内存中完整存储,因此可以直接修改其数据和结构. 2.可以通过该解析器随时访问XML树中的任何一个节点. 3.DOM解析器的API在使用上也相对比较简单. 缺点:如 ...