网页中三角型的CSS实现
我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角。很多网上用到三角形,如图所示,这个三角形是如何实现的呢?
1.使用CSS可以实现,先来复习一CSS盒子模型相关知识。给出如下CSS代码:
- <style>
.box{
margin-top:100px;
margin:100px auto 0;
height: 20px;
width: 20px;
background-color: red;
}
</style>
网页body区域中使用如下代码:
- <div class="box"></div>
运行效果为:
2.在上面代码的基础上书写如下代码:
- <style>
.box{
width:50px;
height:50px;
background-color:blue;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}
</style>
网页body区域中使用如下代码:
- <div class="box"></div>
运行结果如下图所示。
- 将上面的CSS代码修改为如下:
- <style>
.box{
width:0px;
height:0px;
background-color:blue;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}
</style>
- 运行如下图所示。
- 此时,三角形出现了。
- 继续增加代码:
- .triangle1{
height:0px;
width: 0px;
border-style: solid;
border-width: 50px;
border-color: red transparent transparent transparent;/*transparent代表默认颜色*/
- font-size: 0;/*兼容性处理*/
line-height: 0;
body区域增加下面代码:
- <div class="triangle1"></div>
- 运行结果如下:
可以测试一下下面这些三角型出现在哪些位置:
- border-color: transparent transparent transparent red;
- border-color:transparent red transparent transparent;
- border-color: transparent transparent red transparent;
- 2.前面提到的任务的实现:
- <style>
.div1{
position: relative;
height:100px;
width: 200px;
border:1px solid #dddddd;
background-color: #fff;
margin: 100px auto;
}
.triangle1{
position: absolute;
top: -40px;
left:50%;
margin-left:-20px ;
width: 0;
height: 0;
border-style: solid;
border-width:20px;
border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
border-color: transparent transparent #ddd transparent;
line-height: 0;
font-size: 0;
}
.triangle2{
position: absolute;
top: -38px;
left:50%;
margin-left:-19px ;
width: 0;
height: 0;
border-style: solid;
border-width:19px;
border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
border-color: transparent transparent #fff transparent;
line-height: 0;
font-size: 0;
}- </style>
- body区域放置的代码:
- <div class="div1"><p class="triangle1"></p> <p class="triangle2"></p></div>
- 运行程序,结果如图所示。
- 原理是定义两个小三角型,这两个小三角形宽度是只相差1px,然后使用颜色与div1容器背景颜色相同的小三角形,也就是这里的
- triangle2去覆盖三角形triangle1,让三角形triangle1只留出两个斜边出来。注意下图中CSS定义中的差异。
资料参考:
https://www.cnblogs.com/monozxy/p/7903019.html
https://www.jianshu.com/p/1f32120a503b
https://www.cnblogs.com/linsinan/p/6928734.html
https://www.cnblogs.com/xxhuan/p/7657726.html
网页中三角型的CSS实现的更多相关文章
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
- CSS网页中的相对定位与绝对定位
在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对).有很多朋友对这条指令的用法还是 ...
- 通过CSS让html网页中的内容不可选
*{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...
- 向网页中写入js和css
向网页中写入js和css 本函数由前辈所写 loadFile: function (url, ftype) { var fileref; if (ftype == "js") { ...
- CSS在网页中应用的方式_嵌入式
内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...
- 使用 CSS 选择器从网页中提取数据
在 R 中,关于网络爬虫最简单易用的扩展包是 rvest.运行以下代码从 CRAN 上安装:install.packages("rvest")首先,加载包并用 read_html( ...
随机推荐
- python之event事件
同进程的一样,线程的一个关键特性是每个线程都是独立运行且状态不可预测.如果程序中的其 他线程需要通过判断某个线程的状态来确定自己下一步的操作,这时线程同步问题就会变得非常棘手.为了解决这些问题,我们需 ...
- LeetCode Day 2
LeetCode0004 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 n ...
- python3的数据类型转换问题
问题描述:在自我学习的过程中,写了个登陆,在input处,希望能够对数据类型进行判断,但是因为python3的输入的数据会被系统默认为字符串,也就是1,1.2,a.都会被系统默认为字符串,这个心塞啊, ...
- Java反射的实例
JAVA反射机制是在运行状态中,对于任意一个类,都能够得到这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法; 这种动态获取的信息以及动态调用对象的方法的功能称为ja ...
- 求最长公共子序列-DP问题
Longest common subsequence problem The longest common subsequence (LCS) problem is the problem of fi ...
- EMP平台简介(转载)
1.什么是EMP EMP平台是一个基于J2EE体系的.WEB应用的.基础框架平台: 表现逻辑框架(MVCFrameWork)与业务逻辑框架(EMPBizLogic)分离: 组件化.配置化设计技术: 可 ...
- js中对Object对象的一些常用操作总结
前言我前面的文章,写过js中“类”与继承的一些文章.ES5我们可以通过 构造函数 或者 Object.create()等方式来模拟出js中的“类”,当然,对象呢是类的实例化,我们可以通过如下方式创建对 ...
- 吴裕雄--天生自然KITTEN编程:对话
- 微软Project Oxford帮助开发人员创建更智能的应用
Oxford帮助开发人员创建更智能的应用" title="微软Project Oxford帮助开发人员创建更智能的应用"> 假设你是一名对关于健身的应用充满奇思妙想 ...
- 监控Linux系统所选的服务所占进程内存占用
[代码] #!/bin/bash #程序功能描述: # 监控系统所选的服务所占进程内存占用 #作者:孤舟点点 #版本:1.0 #创建时间:-- :: PATH=/bin:/sbin:/usr/bin: ...