<!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. C++内存管理的缩影

    都说C++内存管理是个大坑.实际上也确实是这样. C++有析构函数,每当一个对象过期的时候,C++会执行两个动作 1.执行析构函数. 2.将对象和对象的所有数据删除. 很多人就会问了,既然有把对象删除 ...

  2. 数组中的toString，toLocalString，valueOf方法有什么区别

    1. 2.简单来说,tostring就是用字符串来代替对象.tolocalstring就是根据不同的语言环境吧对象转成字符串,实际上totolocalstring是有缺省参数的,如tolocalstr ...

  3. spring与mybatis三种整合方法

    spring与mybatis三种整合方法 本文主要介绍Spring与Mybatis三种常用整合方法,需要的整合架包是mybatis-spring.jar,可通过链接 http://code.googl ...

  4. 关于RequireJS与AngularJS的集成文档

    为什么要整合RequireJS RequireJS是一个Javascript 文件和模块框架,通过模块的方式来配置js文件之间的依赖关系,遵守的是CommonJS的AMD标准. 在开发的时候则无需关注 ...

  5. 自定义view文字垂直居中

    FontMetricsInt fontMetrics = deletePaint.getFontMetricsInt(); int baseline = rect.top + (rect.height ...

  6. 自定义刷新tableView

    // //  LSTWholeTableController.m //  BUDEJIE // //  Created by admin on 16/8/17. //  Copyright © 201 ...

  7. Phonegap中自定义插件的使用

    在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能. 源代码结构图: 本文目的在于讲述怎么扩展一个phonegap组件以及实现. 针对ph ...

  8. <java基础学习>JAVA 对象和类

    Java is an Object-Oriented Language. As a language that has the Object Oriented feature, Java suppor ...

  9. DataSet集合直接根据传入的类转List<T>集合

    最近比较忙,好久没写博客了.个人感觉最好的进步就是写东西.哈哈. 一般我们使用ADO.net从数据库中读取数据返回的集合是DataSet类型的.有时候我们需要进行转换成List<T>集合. ...

  10. HDU 1005 F(Contest #1)

    题意: 已知f[1] = f[2] = 1,输入三个数a,b,n,求f[n] = (a*f[n-1]+b*f[n-2])%7的结果 分析: f[n-1]和f[n-2]最多为7种情况(0,1,2,3,4 ...