<!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. 【leetcode】Same Tree（easy）

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  2. 【hadoop2.6.0】安装+例子运行

    由于下载的是hadoop的最新版,网上各种杂七杂八的东西都不适用.好在官网上说的也够清楚了.如果有人看这篇文章的话,最大的忠告就是看官网. 官网2.6.0的安装教程:http://hadoop.apa ...

  3. php继承、多态

    继承: 概念:子类可以继承父类的一切 特点:单继承:一个子类只能有一个父类,一个父类可以派生出多个子类 方法重写:在子类里面对父类的方法进行重写. 重写:override 重载,编译多态:overlo ...

  4. Mysql 基于BinaryLog的复制

    .Mysql Master将更新[Update]和变化[Change]作为事件[events]写入Binary log.Mysql slaves 被配置为读取Binary log from maste ...

  5. String[] a = new String[]{"1","2"},我如果想增加一个"3"到a中，如何增加？

    在java中数组是定长的,当你声明了数组的大小后数组的长度就不能改变在你的程序中,数组的初始化大小为2,a[0]="1";a[1]="2",所以无法产生元素a[ ...

  6. 隐藏<input type="file"> 实现点击div或图片打开文件选择路径

    HTML: <input type="file" style="display:none" id="addfile-btn"> ...

  7. MyBatis mapper文件中的变量引用方式#{}与${}的差别

    MyBatis mapper文件中的变量引用方式#{}与${}的差别 #{},和 ${}传参的区别如下:使用#传入参数是,sql语句解析是会加上"",当成字符串来解析,这样相比于$ ...

  8. iOS开发人员不容错过的10大工具

    内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...

  9. 与你相遇好幸运，async解决循环回调问题

    由于使用的sailsjs框架,用的是sailsjs自身带的ORm(就是waterline),ORM的默认数据库的返回值在回调里面. > arg是一个数组 count用来计数用 tmpArr临时存 ...

  10. Log4Net配置以及使用

    跟踪程序代码,及时发现程序的运行状态,是每个成熟的软件所必不可少的一个环节,网站发布到真实的环境之后,对于程序的运行状态,我们并不能想开发环境那也,点击调试.日志记录显示就尤为重要,在.NET中记录日 ...