css画三角的原理
2024-09-02 05:24:51
当我们设置一个div其width与height为100px，并且设置其四边框的宽度为100px，且分别设置其颜色后，我们可以看到如下的一张图片
此时如果设置这个div的height为0的话，其他不变，会得到下面这个图形
下面把其宽度也设置为0后，得到如下的一张图片
删除border-bottom
设置border-left border-right 颜色为transparent
根据上面我们就可以根据不同的设置，实现各种三角形
总结如下：
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid #000;
border-right:100px solid transparent;
border-left:100px solid transparent;
}
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-bottom:100px solid blue;
border-right:100px solid transparent;
border-left:100px solid transparent;
}
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-right:100px solid red;
}
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-left:100px solid #00ff00;
}
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-bottom:100px solid blue;
border-left:100px solid transparent;
}
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid #transparent;
border-left:100px solid #00ff00;
}
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid #000;
border-left:100px solid trnasparent;
}
.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-bottom:100px solid transparent;
border-left:100px solid #00ff00;
}
最新文章
- ZOJ Problem Set - 3329(概率DP)
- 第二章、 Linux 如何学习
- UITextField详解
- Volley使用指南第三回（来自developer.android）
- Commons IO - IOUtils
- vijos1049送给圣诞夜的礼品
- 什么是HTTP Keep-Alive呢？
- hive 函数学习
- ICSharpCode.SharpZipLib.Zip
- 转换DataSet中的多个表为Excel中的多个Sheets
- MySql学习笔记（四）
- [Link-Cut-Tree]【学习笔记】
- 2015 多校联赛 ——HDU5386（暴力）
- JAXB注解 @XmlRootElement 及XML文件解析详解
- Tensorflow安装记录
- 谷歌钦定的编程语言Kotlin大揭秘
- Go语言小试牛刀---几个简单的例子
- yum安装的Apache的各种配置文件的位置
- Diango思维图
- 解析spark RDD