<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <style>
        .demo{
            width: 200px;
            height: 200px;
            /*background-color: #999;*/
            margin: 0 auto;
        }
        .tri{
            display: block;
            width: 20px;
            height: 20px;
            position: relative;
            left: 10px;
            /*border: 1px solid green;*/
        }
        .tri:before,.tri:after{
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            border-width: 10px;
            border-color: transparent transparent red transparent;
            border-style: dashed dashed solid dashed;
        }
        .tri:after{
            margin-top: 1px;
            border-color: transparent transparent white transparent;
        }
        .tri.active:before{
            border-color: transparent transparent green transparent;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span class="tri active"></span>
    </div>
</body>
</html>

css写带边框的三角形的更多相关文章

  1. css挤带边框的三角

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  3. CSS实现带阴影效果的三角形

    具体实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  4. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  5. css实现div左侧突出一个带边框的三角形

    .vip-control-header{ width: 600px; height: auto; background: #F8F8F8; border: 1px solid #e2e2e2; pad ...

  6. html5 css写出一个实心三角形和空心三角行

    原理:css中的border属性的特殊性. 实心三角形: html5: <div id="mydiv"></div> css: #mydiv{ height ...

  7. 利用css制作带边框的小三角

    标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...

  8. css实现带边框的冒泡提示框

    需求是实现这种效果, 因为内容是动态的,使用图片不是很好: 原因: 如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理 ...

  9. CSS九宫格带边框的多种实现

    九宫格,每个单元格滑动上去显示完整边框. 本身考察的知识点并不复杂,margin负值的遮挡,以及流布局中relative的超越. 代码固定部分是这样的, <div> <div> ...

随机推荐

  1. IOS-01零碎知识总结

    1. 变量的@public @private @package @protected 声明有什么含义? @public  可以被所有的类访问 @private  只有该类的方法可以访问,子类的都不能访 ...

  2. 闭包（block）

    block主要解决反向传值和传值问题 1.block申明的公式       返回值类型 (^名字)(参数列表); 2.block实现的公式       名字= ^(参数列表){}; 3.局部变量   ...

  3. xmpp SASL 定义

    SASL 定义 <摘抄自:xmpp_3920> [SASL]的 profiling 需求要求协议定义 供以下信息: 服务名:“xmpp” 初始序列:初始实体 供一个开放 XML 流头后,并 ...

  4. 【2016-08-18】转载：总结C++中几种结构体初始化的方法

    作者:Ac_Von 博客地址:http://www.cnblogs.com/vongang/ 文章地址:http://www.cnblogs.com/vongang/archive/2011/07/3 ...

  5. 关于logcat日志

    最近学习android,碰到了logcat,个人总结一下. 当不出日志是解决办法: ProjectMenu---后台设置----LOG设置---LOG开关 Logcat(deprecated)和Log ...

  6. EasyUi – 5.修改$.messager.show() 弹出窗口在浏览器顶部中间出现

    由于在easyui中$.messager.show() 只有一种弹出方式(在浏览器的或下角弹出),我最近在做一个项目的时候需要在浏览器的顶部中间出现.由于自己写花那么多的时间,所以就去修改了原码(不推 ...

  7. Linux系统入门学习：在curl中设置自定义的HTTP头

    http://www.linuxidc.com/Linux/2015-02/114220.htm

  8. Android 5.0 如何正确启用isLoggable(一)__使用详解

    转自:http://blog.csdn.net/yihongyuelan/article/details/46409389 isLoggable是什么 在Android源码中,我们经常可以看到如下代码 ...

  9. mac os x使用技巧及常用软件

    常见键盘符号:⌘(command).⌥(option).⇧(shift).⇪(caps lock).⌃(control) 常用快捷键 复制  Command+c / Option+拖拽 粘贴  Com ...

  10. 64位Ubuntu运行32位程序时报文件不存在(No such file or Directory)的一种解决办法

    尝试在64位Ubuntu下面运行32位程序时, 一直说 文件不存在(No such file or directory), 我只想说++. 你tm说个文件格式不正确不就好了? 非得说个文件不存在! 真 ...