原理:
把上、左、右三条边隐藏掉(颜色设为 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. Android_文件存储

    因为项目的需求,想实现一个指导使用的欢迎页效果,通过在网上的询问,给的一种解决办法是通过SharedPreferences文件存储方式来实现,具体的实现类似于通过第一次取得SharedPreferen ...

  2. [Qt5] How to connect c++ with QML

    Qt5处于过度阶段,架构繁琐,学习成本不低.尤其是UI代码竟然被重写,变了天. Qt中的c++可能是连接OPENCV与QML的一个不错的桥梁,在此学习这部分实用的技术. Reference: http ...

  3. JavaWeb:JavaBean基础

    JavaBean基础 JavaBean简介: 1.JavaBean是一种可以重复使用的类,可以没有用户界面,主要负责业务数据或者处理事物(数据运算.操作数据库) 2.与JSP配合,可以简化JSP代码. ...

  4. Linux 启动过程分析

    本文仅简单介绍Linux的启动过程,在此基础上做简要的分析.对于Linux启动过程中内部详细的函数调用不做介绍,只是希望本文能给新手起到一个抛砖引玉的作用,以便深入研究Linux的启动过程.下图基本展 ...

  5. CSS3魔法堂:认识@font-face和Font Icon

    一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...

  6. C#--声明类

  7. 相关子查询【SQL Server】

    查询book表中大于该类图书价格平均值的图书信息 先将第一条记录的类编号的值为2代入子查询中,子查询为 select avg(price) from book b where b.id=2 则得到类编 ...

  8. orleans/Documentation

    福利 奥尔良的主要好处是︰开发人员工作效率,甚至为非专家程序员;和默认的透明可伸缩性与程序员没有特别努力.我们扩大每个下面这些好处. 开发人员的生产力 奥尔良的编程模型通过提供以下关键的抽象. 担保和 ...

  9. 在IIS服务器上部署svg/woff/woff2字体

    在url没错的前提下,字体文件报404错误,如.woff,.woff2 出错原因: IIS不认SVG,WOFF/WOFF2这几个文件类型 解决方案: 在IIS服务器上部署svg/woff/woff2字 ...

  10. [Asp.net 5] DependencyInjection项目代码分析3-Ninject

    Microsoft.Framework.DependencyInjection.Ninject 该工程内部共包含5个类文件,底层使用Ninject实现依赖注入,工程截图如下: 从文件命名可以看出,Ni ...