<!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. unity自动保存项目

    原文来自于:http://wiki.unity3d.com/index.php?title=AutoSave#C.23_-_AutoSave.cs      (奋斗的菜鸟_1029633680) 很多 ...

  2. 【C语言】zz优先队列的实现

    做一个题目时,看见解法中使用了优先队列,http://hawstein.com/posts/3.6.html . 颇为好奇,找资料学习了一下,顺便做个摘要. c++的用法: 转自:http://blo ...

  3. undefined symbol libiconv_open 完全解决方案

    我在另一篇关于Ubuntu+Sendmail+Dovecot+Openwebmail 邮件服务器搭建完全解决方案文章完成后,我的邮件服务器也搭建完成了, 事实上也正在运行中, 但是有网友依据我的操作步 ...

  4. 经典信息图表：2013 扁平设计 VS 拟物设计

    inTacto 是一家互动数字公司,由 Alejandro Lazos 和 Sebastian Caramés 成立于2001年.他们刚刚发布一个信息图表:<平面设计 VS 现实主义>.这 ...

  5. 表上的DELETE操作

    在今天的文章里,我想给你快速展示下当我们从表里删除记录时,在SQL Server里发生了什么.首先我们来创建一个简单的表,在8KB的页上刚好能插入4条记录. -- Create a simple ta ...

  6. 关于解决JQUERY对INPUT元素Change事件不兼容的问题

    最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onc ...

  7. MagicalRecord,一个简化CoreData操作的工具库

    简介 项目主页:https://github.com/magicalpanda/MagicalRecord 实例下载:https://github.com/ios122/MagicalRecord 在 ...

  8. mysql创建每月执行一次的event

    DELIMITER $$ CREATE /*[DEFINER = { user | CURRENT_USER }]*/ EVENT `dev_sp2p6`.`e_test1` ON SCHEDULEE ...

  9. [ShortCut] Visual Studio快捷键

    msdn官方快捷键说明:https://msdn.microsoft.com/zh-cn/library/da5kh0wa.aspx 测试工具: visual studio 2013 操作步骤: 1. ...

  10. 转贴：JavaScript实现Ajax请求简单示例

    转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...