今天在研究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 Calendar
采用javascript实现calender
JavaScript应用实例-Calender.js
雷米德使用Google Calender API的提醒应用
android calender 官方源码
Calender 是 Android 平台的一个日历显示组件，可以显示一整月历
js+html Calender 日历，很不错的日历
对于iOS 的日历做的一个比较可以的demo,可以下载看看
google-calendar-events jQuery插件，可在客户端获取最新的Google日历信息。 这主要是为为客户开发网站的网站承包商提供的。 这样一来，如果客户需要更新日历/向其网站添加事件，他们只需在Google日历上对其进行更新...
GoogleCalendar Google日历示例
Java中Date类和Calender类的比较
Calender:使用CSS网格创建的示例压光机
自定义日历，只是简单的展示功能，例如，展示签到的日期，展示活动的日期，等等，圆形展示，如果想别的图形展示，自己可以进行更换
example code for calender
为了方便应用，我把它拆分为三个部分，js、css、html。 优点：此代码优点是兼容火狐，简洁，中文。 乱码：如果日历出现中文乱码，并且如果在Eclipse中，那么请调整js的属性中编码为utf-8，html页面亦如是。 效果：...
Zabuto_calender.zip
重新实现qt的日历控件，对应date和time都有很好的适应性，使用qt自带的获取popwidget位置的方法，对combobox也有很好的效果
日历控件，主要可以实现日程安排，根据时间查询