<!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. sql server sql语句导入数据到execl2007中

    insert into OPENROWSET('Microsoft.ACE.OLEDB.12.0','Excel 12.0;Database=C:\c.xlsx','select 字段1,字段2 FR ...

  2. onthink 数据库连接配置

    define('UC_DB_DSN', 'mysql://root:@127.0.0.1:3306/app'); // 数据库连接,使用Model方式调用API必须配置此项 /* 数据库配置 */ ' ...

  3. 【翻译】安卓新播放器EXOplayer介绍

    http://developer.android.com/guide/topics/media/exoplayer.html   前言: Playing videos and music is a p ...

  4. javascript理解js中的闭包

    在javascript中变量有其作用域,如果在函数内部var一个变量,那么在函数外部一般情况下是不能被引用的. function outerFun() { ; alert(a); } ; outerF ...

  5. HEAD FIRST HTML & CSS学习笔记1

    一.指定媒体类型=指定显示设备的类型  P400 有两种方式指定媒体类型: a. 直接在<link>标签中加属性media,例: <link href="print.css ...

  6. Windows Store App 音频和视频

    在Windows应用商店应用中提供了MediaElement控件,该控件能为应用提供音频和视频播放功能.就像之前提到的,虽然在多媒体应用开发中,开发人员可以自行开发一套音频.视频编解码规范和开发媒体播 ...

  7. css3实现逐渐变大的圆填充div背景的效果

    手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足. 想到css3的scale属性,就自己来实现一下. <div id="bcd& ...

  8. [转载] linux查找目录下的所有文件中是否含有某个字符串

    链接自 http://blog.sina.com.cn/s/blog_691a84f301015khx.html,并略加修订. 查找目录下的所有文件中是否含有某个字符串 find .|xargs gr ...

  9. Leetcode 详解（Substing without repeats character）

    Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...

  10. hdoj 5124lines

    题意:给你n条线段,求被最多的线段覆盖的点被覆盖的次数 解法:我们可以将一条线段[xi,yi]分为两个端点xi和(yi)+1,在xi时该点会新加入一条线段,同样的,在(yi)+1时该点会减少一条线段, ...