布局div，并命名为id="dropdown",在style使用border属性对div进行控制

#dropdown{

　　width:0px;

　　height:0px;

　　border-top:30px solid red;

　　border-right:30px solid blue;

　　boder-bottom:30px solid green;

　　border-left:30px solid yellow;

}

属性设置完成后，就会出现如下情况：

相信看到这里大家都会明白了如何使用border属性制作倒三角了。

接下来只要根据我们自己的需求更改border的属性就可以得到我们想到的结果了。

如：除了border-top的属性不变以外，其余的属性全部变为white，就可以看到以下效果：

是不是很简单呢！！！

css制作倒三角的更多相关文章

  1. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

  2. 纯css制作带三角(兼容所有浏览器)

    如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...

  3. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  4. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  5. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  6. css绘制倒三角

    <style> i{ border-left: 5px solid transparent; border-right: 5px solid transparent; border-top ...

  7. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  8. 用css 制作三角

    html代码: <div class="div"></div> css代码: .div{ border-top:40px solid #ff0077; bo ...

  9. css倒三角的几种实现方式

    在网页中,你在很多地方都能看到倒三角,比如tooltips,下拉菜单等.大家有几种方式来实现呢? 1.BASE64编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个 ...

随机推荐

  1. VS Code常用快捷键

    // 基础操作 Alt+ ↑                  向上移动行 Shift+Alt + ↓           向上复制行 Ctrl+Enter              在下面换行 (这 ...

  2. 设计模式理解（八）结构型——装饰者模式（记得加上UML图 --- 未完）

    一段时间没写,又忘了,晕...设计模式这种东西一定要经常用. 装饰者模式(Decorator)用于动态地给一个对象增加一些额外的职责,就增加功能来说,他比生成子类更为灵活. 装饰者模式的原则是: 能用 ...

  3. 软件测试1gkd

        通过老师课上的讲解以及对书本和百度百科的学习,我对软件测试有如下的理解.     软件开发的最基本要求是按时.高质量地发布软件产品,而软件测试是软件质量保证的最重要的手段之一.在整个软件生命周 ...

  4. Python3 tkinter基础 Scale orient 横竖 resolution单步步长 length 长度 tickinterval 指示刻度

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. Docker Swarm Mode 学习笔记（聊聊 replicas）

    在 Swarm 集群中, 创建服务时可以通过设置 --replicas 参数来指定此服务在工作节点上运行的任务数. 示例 这里我们来创建一个 nginx 服务作为示例: version: '3' se ...

  6. parquet列式文件实战（未完，待续）

    parquet列式文件实战 parquet code demo http://www.programcreek.com/java-api-examples/index.php?source_dir=h ...

  7. VS 编译错误【error C4996: 'scanf': This function or variable may be unsafe. 】的解决方案

    在VS中编译 C 语言项目,如果使用了 scanf 函数,编译时便会提示如下错误: error C4996: 'scanf': This function or variable may be uns ...

  8. 如何查找redis使用的是哪个配置文件

    ps -ef|grep redis 得到了进程号 xxxx 然后 ls -l /proc/xxxx/cwd ps:可以推广到其他进程,只要有pid,就能找到配置文件

  9. linux如何查看所有的用户和组信息？

    cat /etc/passwd cat /etc/passwd查看所有的用户信息,详情如下图   [步骤二]cat /etc/passwd|grep 用户名 cat /etc/passwd|grep ...

  10. object的wait()、notify()、notifyAll()、方法和Condition的await()、signal()方法

    wait().notify()和notifyAll()是 Object类 中的方法 从这三个方法的文字描述可以知道以下几点信息: 1)wait().notify()和notifyAll()方法是本地方 ...