原理:
把上、左、右三条边隐藏掉(颜色设为 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. 信息加密之非对称加密DH算法

    非对称加密算法是相对于对称加密算法来说的,对于对称加密算法请查阅之前的总结,今天为大家介绍一下DH算法,DH是一种密钥交换算法,接收方根据发送方加密时的密钥,生成接收方解密密钥.下面就一起来学习一下吧 ...

  2. 《BI那点儿事》数据挖掘的主要方法

    一.回归分析目的:设法找出变量间的依存(数量)关系, 用函数关系式表达出来.所谓回归分析法,是在掌握大量观察数据的基础上,利用数理统计方法建立因变量与自变量之间的回归关系函数表达式(称回归方程式).回 ...

  3. SQL*Loader之CASE3

    CASE3 1. SQL文件 [oracle@node3 ulcase]$ cat ulcase3.sql set termout off rem Do not clean up table beca ...

  4. Java多线程系列--“JUC线程池”02之 线程池原理(一)

    概要 在上一章"Java多线程系列--“JUC线程池”01之 线程池架构"中,我们了解了线程池的架构.线程池的实现类是ThreadPoolExecutor类.本章,我们通过分析Th ...

  5. javascript时间戳和日期字符串相互转换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. SQL--Order By

    Order By--将当前查询出来的数据结果,进行排序,排序按照后面指定的列排序; DESC--倒序排序(降序); ASC--正序排序(升序); 汉字:用拼音的首字母排序,升序是从a--z;降序是从z ...

  7. ADO.NET封装的SqlHelper

    参照别人的方法,顺便再次复习下ADO.NET的相关知识.为自己的类库做准备. namespace Common.SqlHelper { /// <summary> /// ADO.NET- ...

  8. HTML5使用Div标签来实现表格

    当支持HTML5时,我们可以使用样式把DIV实现一个表格table. 关键样式语法:display: table,display: table-row,display: table-cell 下面例子 ...

  9. javascript学习笔记2-typeof、Number类型、Boolean()

    1.typeof操作符 对一个值使用typeof操作符可能返回下列某个字符串 "undefined"——这个值未定义 "boolean"——这个值是布尔值 &q ...

  10. C#编程总结(十三)数据压缩

    C#编程总结(十三)数据压缩 在进行文件存储或者数据传输时,为了节省空间流量,需要对数据或文件进行压缩.在这里我们讲述通过C#实现数据压缩. 一.GZipStream压缩 微软提供用于压缩和解压缩流的 ...