<!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系统的初化始配置（包括配置网络，修改主机名，关闭firewalld与selinux的生效）

    一.配置网络环境 1.运行 cmd 查看本机的ip地址,然后记录下来. 2.网络和共享中心--本地连接属性如下: 手工配置到本地连接上面 IP:172.16.191.215,DNS:101.7.8.9 ...

  2. jQuery 点击显示再次点击隐藏

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  3. Android笔记——在布局文件中插入另一个布局文件

    假如有一个布局文件A.xml想把另外一个布局文件B.xml引进其布局,则可以通过下面的代码 <include layout="@layout/B" />

  4. 无废话SharePoint入门教程三[创建网站集和网站]

    一.前言 前两篇文章讲解了什么是SharePoint,并且介绍了在SharePoint中一些常用的概念.但概念终究是概念,我们还是要脚踏实地的去动手实践.下面的文章对于了解SharePoint的人来说 ...

  5. UIDatePicker和UIToolbar的使用

    功能,用UIDatePicker 和UIToolbar 实现点击文本框弹出日期选择空间. 点击确定按钮获取时间显示到对应的Text Field里面,点击取消按钮隐藏键盘. 1.创建textField控 ...

  6. Format函数

    Format是一个很常用,却又似乎很烦的方法,本人试图对这个方法的帮助进行一些翻译,让它有一个完整的概貌,以供大家查询之用: 首先看它的声明: function Format(const Format ...

  7. Sublime Text 3 中文乱码的解决方法

    Sublime Text 3 中文乱码表现如下图: 解决方法很简单,三步搞定: 步骤一: 下载ConvertToUTF8,下载地址:http://pan.baidu.com/s/1gd5SWmB 步骤 ...

  8. java 排序

    class Employee { private String name; private String id; private String salary; public static void m ...

  9. 完全卸载oracle11g步骤【转】

    重装oralce,每次都很蛋疼.找了个比较全的步骤.留作备份. 完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2 ...

  10. 使用Volley执行网络数据传输

    首先需要实例化一个RequestQueue RequestQueue queue = Volley.newRequestQueue(this); 然后是根据提供的URL请求字符串响应 String u ...