今天在研究google calendar时，发现一个google calendar的css中一个很有意思的东东，研究一下；
在用calendar时，点击一个空白处，会弹出一个弹出框，让我们填入内容，图中标注的地方的三角符号，起初以外是用了一种那个图片，找了半天没有找到图片，原来是通过css实现的。
主要利用了border-style:solid属性，在div为空时，利用border属性设置
.classstyle{
border-color:#CCCCCC transparent;
border-style:solid;
border-width:9px;
border-right:1px;
}
<div style="classstyle">
</div>
border-top border-bottom border-left border-right 分别对应图中四种（左右上下）情况
右上角的图，利用一个背景白色透明的大图和一个背景为灰的略便宜的小图相互重叠，即可实现上图中的向下指示的小三角符号，同理，向上指示的小三角符号也可以用相同原理实现
示例代码
<html>
<head>
</head>
<style type="text/css">
.temp ,.temp2 {
left:0;
top:0;
position:absolute;
}
.temp{
border-color:#CCCCCC transparent;
border-style:solid;
border-width:9px;
border-bottom:1px
}
.temp2{
border-color:#FFFFFF transparent;
border-style:solid;
border-width:8px;
left:1px;
border-bottom:1px;
}
.bg{
background:black;
width:100%;
height:100%;
position:absolute;
}
</style>
<body>
<div class="bg">
<div class="temp">
</div>
<div class="temp2">
</div>
</div>
</body>
</html>
google的东西确实很赞！
- 大小: 18.8 KB
- 大小: 17.7 KB
分享到：
相关推荐
同步Google Calender 至outlook
在PHP应用程序中集成Google日历是一项常见的需求，它允许开发者将用户日历事件与Google服务无缝连接，提供统一的日程管理体验。以下是一份详细的知识点解析，涵盖了集成过程的关键步骤和技术要点。 **1. Google API...
总的来说，深入分析“android calender”官方源码能帮助开发者掌握Android日历应用开发的核心技术，提升应用的性能和用户体验。无论是对系统级应用的改进还是第三方日历应用的开发，理解并运用这些源码知识都将...
我们将主要围绕"calender_self_qt.zip"中的内容展开，分析其设计原理、实现方法以及可能的应用场景。 Qt是一个流行的跨平台应用程序开发框架，广泛应用于桌面、移动和嵌入式设备。它提供了丰富的UI控件，包括用于...
在Android开发中，`Calender`日历组件是构建时间管理类应用不可或缺的一部分。它允许开发者为用户提供直观的日历视图，以便查看、添加和管理日期相关的事件。本篇文章将深入探讨`Calender`组件的核心功能，使用方法...
采用javascript实现calender
JavaScript应用实例-Calender.js
通过分析这个 "js+html Calender 日历"，我们可以学习到前端开发中的HTML布局、CSS美化、JavaScript交互等多方面技能，对于提升网页应用的用户体验具有重要作用。如果你进一步探索jsCalendar这个项目，将能够深入...
ReMynd是一款基于Google Calender API构建的应用，旨在帮助用户管理他们的日程并设置提醒。通过集成Kotlin编程语言，该应用提供了高效且用户友好的界面，以实现与Google日历的无缝交互。此外，ReMynd还利用Firebase...
`ios calender`这个项目提供了一个高质量的示例，展示了如何在iOS应用中集成和操作日历功能。以下将详细介绍iOS日历API的使用，以及在这个`JTCalendar-master`项目中可能涉及到的关键知识点。 首先，我们需要了解...
总的来说，"calender.js"作为一个JavaScript日历组件，不仅提供了基础的日期操作功能，还具备良好的可定制性，能够适应各种应用场景。通过对源码的深入研究和实践，我们可以更好地利用这个工具，提升我们的开发效率...
在IT行业中，Google Calendar是一款非常重要的在线日历应用，它被广泛用于个人和团队的日程管理。本示例将深入探讨如何使用Google Calendar及其相关功能，帮助用户更好地组织时间、安排会议并同步不同设备上的日程。...
在实际应用中，我们还需要考虑交互性。比如，用户点击某一天，日历应能响应并显示该日期的相关信息，或者允许用户进行标记。这需要添加事件监听器，捕捉用户的点击行为，然后根据点击的日期执行相应的操作。 此外，...
"art-calender-test"可能包含了预设的CSS文件，可以调整颜色、字体、布局等属性，以适应不同的设计风格。 接下来，JavaScript部分是日历插件的核心。jQuery库使得我们可以更简单地处理DOM操作，监听用户事件，以及...
这可能涉及HTML/CSS/JavaScript（Web端）、Android Studio（移动应用）或Swift（iOS）等。 7. **事件管理**：在日历应用中，用户可以添加、编辑和删除事件。这需要实现数据结构来存储事件，并提供接口供用户操作。...
google-calendar-events jQuery插件，可在客户端获取最新的Google日历信息。 这主要是为为客户开发网站的网站承包商提供的。 这样一来，如果客户需要更新日历/向其网站添加事件，他们只需在Google日历上对其进行更新...
此外，"Calender.jar"还支持自定义样式和主题，允许开发者通过修改CSS样本来调整日历的外观，以符合他们应用的整体设计风格。这种灵活性使得插件能够无缝融入各种类型的项目中。 总的来说，"Calender.jar"作为一个...
Zabuto Calendar是一款基于JavaScript和jQuery的开源日历插件，专为Web应用程序设计，提供丰富的功能和自定义选项。这个压缩包“Zabuto_calender.zip”包含了该日历插件的相关文件，用于帮助开发者在网页中集成一个...
标题中的"proj---cal.rar_calender"暗示这是一个与日历应用相关的项目，可能是用Java 2 Micro Edition (J2ME)开发的。J2ME是Java平台的一个版本，主要用于嵌入式设备，如早期的移动电话，它允许开发在这些设备上运行...
在Android平台上，开发一款日历应用是常见的需求，这涉及到对Android系统日历API的深入理解和使用。本文将详细介绍如何通过编程实现一个显示年月日、星期，并支持用户选择日期、切换月份和年的日历功能。 首先，...