Google Calender CSS应用小技巧

最新推荐文章于 2022-05-20 16:11:35 发布

mackentancap

最新推荐文章于 2022-05-20 16:11:35 发布

阅读量184

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/mackentancap/article/details/84119066

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天在研究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的东西确实很赞！

mackentancap

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Calender CSS应用小技巧

今天在研究google calendar时，发现一个google calendar的css中一个很有意思的东东，研究一下；在用calendar时，点击一个空白处，会弹出一个弹出框，让我们填入内容，图中标注的地方的三角符号，起初以外是用了一种那个图片，找了半天没有找到图片，原来是通过css实现的。主要利用了border-style:solid属性，在div为空时，利用border属性设置...
复制链接

扫一扫

专栏目录