<!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. 设置zookeeper jvm内存

    看了你的问题, 我还特意的查看了ZooKeeper的启动脚本代码.ZooKeeper启动脚本没有加任何参数,也就是使用jvm默认的. 如果想要加大ZooKeeper的JVM使用内存.可以在更改{ZK_ ...

  2. sublime3+wamp配置php,(无需配环境变量)

    思来想去,最后还是决定给自己的手游加简单后端验证.好久没搞php了,最近搜了搜资料,发现现在php比几年前方便简单的多,有wampserver和sublime用.想想当年我还用记事本+phnow呢. ...

  3. sap IRfcTable 转成 DataTable

    public DataTable GetDataTableFromRFCTable(IRfcTable myrfcTable) { DataTable loTable = new DataTable( ...

  4. ireport 导出工具类

    Ireport 报表导出 Poi + ireport 导出pdf, word ,excel ,html 格式 下面是报表导出工具类 Ireport 报表导出 Poi + ireport 导出pdf,  ...

  5. Fire!(BFS)

    Fire! Time Limit:1000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Descr ...

  6. mysql event

    1.定时调用 存储过程 DELIMITER $$ ALTER DEFINER=`root`@`localhost` EVENT `event_stroke_ArchivesReportDataRefr ...

  7. 关于VSTO调用Excel后进程无法退出的解决方案：

    VSTO的Excel对象模型提供了托管代码对Excel的操作.但是它的实现时通过RCW(Runtime Com Wrapper)实现的,所以无法完全按照托管代码的运行方式操作.COM的资源释放时通过引 ...

  8. iOS-动画效果（首尾式动画，代码快动画，核心动画，序列帧动画）

    一.各个动画的优缺点 1.首尾动画:如果只是修改空间的属性,使用首尾动画比较方便,如果在动画结束后做后续处理,就不是那么方面了. 2.核心动画:有点在于对后续的处理方便. 3.块动画: (1)在实际的 ...

  9. ASP.NET MVC权限验证 封装类

    写该权限类主要目地 为了让权限配置更加的灵活,可以根据SQL.json.或者XML的方式来动态进行页面的访问控制,以及没有权限的相关跳转. 使用步骤 1.要建一个全局过滤器 //受权过滤器 publi ...

  10. Spring基础—— SpEL

    一.SpEL:Spring 表达式语言,在使用的时候类似于 EL 表达式,但是需要注意的是,SpEL 使用在 Spring Config 文件中. 二.格式:使用 #{} 作为界定符,所有在大括号中的 ...