<!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】Path Sum I & II（middle）

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  2. 【python】Python遍历dict的key最高效的方法是什么？

    来源:https://segmentfault.com/q/1010000002581747 方法一:直接遍历 速度快 for key in _dict: pass 方法二:iterkeys() 速度 ...

  3. 获得同级iframe页面的指定ID元素的几种实现方法

    1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById ...

  4. supersr--NSURLSessionConfiguration-下载进度

    ////  ViewController.m//  下载进度 // //  Created by Super on 14/7/4. //  Copyright (c) 2014年 iOS. All r ...

  5. [Android Rro] SDK JAR

    cd ../../../outputs/aar/mkdir AAR_VERSIONmkdir JAR_VERSIONmv app-release.aar AAR_VERSION/${project_n ...

  6. August 19th 2016 Week 34th Friday

    Friends are not the people you meet at the top, they are the people who were with you at the bottom. ...

  7. c++序列化方法

    暂时使用boost 序列化, 目前我的测试基本都ok 只是对于c++11 shared ptr 没有测试成功,只能手工写下shared ptr 部分的序列化,也就是目前我对指针都不直接序列化,自己管理 ...

  8. Nginx详解（一）

    1.Nginx是什么? Nginx就是反向代理服务器. 首先我们先来看看什么是代理服务器,代理服务器一般是指局域网内部的机器通过代理服务发送请求到互联网上的服务器,代理服务器一般作用于客户端.比如Go ...

  9. 【JAVA多线程中使用的方法】

    一.sleep和wait的区别. 1.wait可以指定时间,也可以不指定. 而sleep必须制定. 2.在同步的时候,对于CPU的执行权和以及锁的处理不同. wait:释放执行权,释放锁. sleep ...

  10. maven pom.xml示例

    示例说明: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3. ...