<!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. ajax向后台传递数组

    $.ajax({ traditional: true//这个设置为true,data:{"steps":["qwe","asd"," ...

  2. .net乱码问题

    最近在给一个客户做framwwork版本升级,从1.0版本升级到4.0版本,发现最大的问题就是乱码. 在1.0版本下,gb2312编码能够运行得很好,可是升级到4.0后就都是乱码. 随后将webcon ...

  3. icon-font与svg

    icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...

  4. Xcode模拟器不显示SDK版本,反而显示设备ID的解决办法

    今天在应用程序中修改了Xcode app 的名称,结果导致Xcode模拟器不显示SDK版本,反而显示设备ID了,感觉特别的忧伤......如图: 进到Xcode->window->Devi ...

  5. 【基本技能篇】>>第3篇《暗时间_指导学习的方法论——心得》

    暗时间——指导学习的方法论 ——2016年2月11日 打造自己的核心竞争力:①专业领域技能:②跨领域的技能(解决问题的能力,创新思维,判断与决策能力,表达沟通能力等等):③学习能力,持续学习和思考新知 ...

  6. Jquery做全选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Android ORM应用开发框架KJFrameForAndroid使用详解

    本文将为大家介绍一款Android ORM应用开发框架KJFrameForAndroid,很多时候我们也叫它KJLibrary. KJFrameForAndroid简介 KJFrameForAndro ...

  8. Codeforces Round #284 (Div. 2) C题（计算几何）解题报告

    题目地址 简要题意: 给出两个点的坐标,以及一些一般直线方程Ax+B+C=0的A.B.C,这些直线作为街道,求从一点走到另一点需要跨越的街道数.(两点都不在街道上) 思路分析: 从一点到另一点必须要跨 ...

  9. Visual Basic 2012 借助DataGridView控件将Excel 2010数据导入到SQL server 2012

    (注:注释的颜色原本为绿色,在这里变为黑色,有点不便,但不会造成阅读影响.放入Visual Basic2012代码编辑器后会还原成绿色.) 摘  要:DataGridView控件作为数据传输的中介,只 ...

  10. android学习之ListView

    移通152余继彪 该组件用于显示列表的view  包含了三个关键元素 listView 适配器 以及数据,适配器主要是用于将数据映射到listview,适配器数据主要是有hasmap 配合list对每 ...