<!DOCTYPE html>
/*直接复制代码即可在浏览器验证*/

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*盒子的样式*/
        .box {
            position: relative;
            margin: 20px auto;
            height: 200px;
            width: 200px;
            background: rgba(0, 0, 0, 0.5);
        }
        /*利用border-style实现*/
        .drop-down {
            position: absolute;
            top: 10px;
            left: 10px;
            height: 0;
            width: 0;
            border: 3px;
            /*style依次是上边框、右、下、左*/
            border-style: solid dashed dashed dashed;
            /*想实现向下的三角就把上边框设置为实现其余几个边框都是虚线并且颜色设置为透明*/
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            color: #fff;
        }

        /*再来写个三角向右的例子*/
        .right {
            position: absolute;
            top: 10px;
            left: 30px;
            height: 0;
            width: 0;
            border:10px;
            border-style:dashed dashed dashed solid;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            color: yellowgreen;
        }

    </style>
</head>
<body>
<!--先写个盒子加上黑色背景，来和生成的小三角来做下对比-->
<div class="box">
    <i class="drop-down"></i>
    <i class="right"></i>
</div>

</body>
</html>

CSS通过边框border-style来写小三角的更多相关文章

  1. 利用边框border的属性做小符号

    前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址.最后问了同学,才得知是用border属性做出来的. 符号如右:  其css代码如下: .fuhao { pos ...

  2. 如何运用CSS写小三角

    <html> <div class="con"></div> </html> <style> .con{width:0; ...

  3. CSS 奇思妙想边框动画

    今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...

  4. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  5. 教你小三角，适用移动端等，解决移动端a标签的默认样式

    1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下: <!DOCTYPE html> <html> <hea ...

  6. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  7. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  8. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

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

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

随机推荐

  1. winedt设置自动显示行号[latex]

    options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...

  2. 动态密码卡TOTP算法

    TOTP NET实现:http://googleauthcsharp.codeplex.com/ 引用:http://www.cnblogs.com/wangxin201492/p/5030943.h ...

  3. 使用windbg分析iis崩溃的一个实例

    问题背景说明:客户的生产环境不定时发生崩溃,需要定位崩溃的原因.在开发环境不能重现该问题,准备抓取IIS的dump文件分析 第一步:在客户的生产环境抓取dump文件 参考:IIS崩溃时自动抓取Dump ...

  4. 疯狂的ASP.NET系列-第一篇：啥是ASP.NET后续

    之前总结到了ASP.NET的七大特点,只总结了2大特点,现继续总结后面的5大特点. (3)ASP.NET支持多语言 这里说的多语言就是多种开发语言,如C#,VB.NET,无论你采用哪种开发语言,最终的 ...

  5. SharePoint 2013中的爬网最佳做法

    了解在 SharePoint Server 2013 中爬网的最佳做法 搜索系统对内容进行爬网,以构建一个用户可以对其运行搜索查询的搜索索引.本文包含有关如何最有效地管理爬网的建议. 本文内容: 使用 ...

  6. Network - Nmap

    wiki - Nmap Nmap - homepage Nmap参考指南(Man Page) Nmap中文网 常用示例 1) Ping扫描,打印出对扫描做出响应的主机: nmap -sP 192.16 ...

  7. Java魔法堂：初探MessageFormat.format和ChoiceFormat

    一.前言 刚开始从.net的转向java的时候总觉得 String.format 用得不习惯,希望格式模版会这样 {}, }$s,$s's cat.%2$s,this is %1$s's dog. . ...

  8. awk引用外部变量及调用系统命令方法

    目标:想用awk与scp命令批量传送文件 前提:先搭好主机间的免密登陆环境(参考:http://www.cnblogs.com/tankaixiong/p/4172942.html) 实现脚本方法: ...

  9. [Architect] Abp 框架原理解析(1) Module

    本节目录 Abp介绍 Abp源码分析 代码实现 Abp介绍 学习了一段时间的Abp,领略了一下前辈的架构.总结还是SOLID,降低耦合性. 虽然从架构上说甚至不依赖于DI框架,但实际上在基础框架中还是 ...

  10. PP66 EEPPPPMM SSyysstteemm AAddmmiinniissttrraattiioonn GGuuiiddee 16 R1

    ※★◆●PP66 EEPPPPMM SSyysstteemm AAddmmiinniissttrraattiioonn GGuuiiddee 16 R1AApprriill 22001166Conte ...