<!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. MFC资源冲突解决方法

    AFX_MANAGE_STATE(AfxGetStaticModuleState())   先看一个例子: 1.创建一个动态链接到MFC DLL的规则DLL,其内部包含一个对话框资源.指定该对话框ID ...

  2. Maxdos 9.3不能引导系统进入Maxdos

    一.故障描述 最近安装一台新电脑安装的系统版本是windows7_professional_with_sp1_x64,安装完成后想用Maxdos对系统进行备份.出现错误:Warning: the hi ...

  3. Codeforces Beta Round #13 C. Sequence （DP）

    题目大意 给一个数列,长度不超过 5000,每次可以将其中的一个数加 1 或者减 1,问,最少需要多少次操作,才能使得这个数列单调不降 数列中每个数为 -109-109 中的一个数 做法分析 先这样考 ...

  4. Ubuntu下PHP的扩展

    Ubuntu版本:14.04 1. 下载php-5.5.10.tar.bz2,并解压. 2.  终端进入解压后的目录php-5.5.10,运行configure.(输入命令./configure) 3 ...

  5. [原]如何在Android用FFmpeg解码图像

    前一篇[原]如何用Android NDK编译FFmpeg 我们知道了如何使用NDK来编译Android平台下使用的FFmpeg动态库.这篇文章我们就可以使用Android下的JNI来调用FFMpeg进 ...

  6. zk框架window之间传值操作

    .zul中向Action传递参数: <listcell> <button label="修改" onClick="@command('edit',id= ...

  7. 安卓模拟器bluestack 换imei

    有好多种方法,下面介绍2种   第一种方法   通过靠谱助手设置,非常简单.   第二种方法   1.解压 root_20121221文件夹,将Root.fs 覆盖到 win7路径:C:\Progra ...

  8. 一款 .NET 下的轻量级 REST 和 HTTP API 客户端 - RestSharp

    项目地址:https://github.com/restsharp/RestSharp Features Supports .NET 3.5+, Silverlight 4, Windows Phon ...

  9. Understanding apps: mobile, native or responsive

    Background Maybe you have decided to get an app built. You will not build it yourself (obviously!) s ...

  10. 斜堆(二)之 C++的实现

    概要 上一章介绍了斜堆的基本概念,并通过C语言实现了斜堆.本章是斜堆的C++实现. 目录1. 斜堆的介绍2. 斜堆的基本操作3. 斜堆的C++实现(完整源码)4. 斜堆的C++测试程序 转载请注明出处 ...