原理:
把上、左、右三条边隐藏掉(颜色设为 transparent)

#demo1 {
width:;
height:;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;//方向往那边就把颜色设在他相反的位置;推荐使用这个,好记;
}
或者

#demo2 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid red;  //二边的宽度设为底边的一半
}

用纯CSS创建一个三角形的更多相关文章

  1. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  2. Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?

    题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...

  3. CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  4. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  5. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  7. 如何用css实现一个三角形?

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  8. 纯CSS实现一个微信logo,需要几个标签?

    博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...

  9. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

随机推荐

  1. hibernate(十)双向关联关系的CRUD

    本文链接:http://www.orlion.ml/28/ 一.保存 1. 假设一个group有多个user,一个user只属于一个group,当保存user对象到数据库中时可以 User u = n ...

  2. Key Components and Internals of Spring Boot Framework--转

    原文地址:http://www.journaldev.com/7989/key-components-and-internals-of-spring-boot-framework In my prev ...

  3. 如何在windows 10 x64安装佳能 CP900 驱动

    佳能太无耻,为了销售CP910 , CP900 到win8 ,win8.1,win 10 都没有驱动程序,网上找的方法都不行,IT民工自有办法: 1.按住shift键,重启电脑 restart 2.在 ...

  4. Asp.Net工作原理

    1. ASP.NET页面的的一般处理过程: 客户请求WEB页面 WEB服务寻找指令文件(.ASPX) ASP.NET代码被发送给CLR进行编译 HTML流返回给浏览器和指令 浏览器处理HTML并显示页 ...

  5. AngularJS中使用service,并同步数据

    service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module ...

  6. Entity Framework基础01

    学习了ADO.NET的相关知识,掌握了它对数据库表的基本操作,但是实际在开发项目应用中微软为我们开发ef这个ORM,使用它可以很方便的利用ADO.NET来操作DBMS,使得我们开发项目的着重点放在业务 ...

  7. 【转载】8天学通MongoDB——第四天 索引操作

    这些天项目改版,时间比较紧,博客也就没跟得上,还望大家见谅. 好,今天分享下mongodb中关于索引的基本操作,我们日常做开发都避免不了要对程序进行性能优化,而程序的操作无非就是CURD,通常我们 又 ...

  8. C语言学习016:单链表

    #include <stdio.h> //定义一个链表,链表是一种递归结构,在定义的时候必须要给结构起一个名字 typedef struct folder{ int level; char ...

  9. 判断JS对象是否拥有某属性

    两种方式,但稍有区别 1.in 运算符  

  10. 【iOS】配置和使用静态库

    上一篇 我们演示了了如何创建自己的静态库,最终生成多个.a文件,根据需要引用工程就可以直接使用静态库了,但是有个很麻烦的问题,模拟器用的库和真机的不是同一个,当我们切换的时候需要更换静态库,有两种方式 ...