前端开发工作中经常会有这样的开发需求,如下图所示:
1.png
接下来我们用代码来实现以下这个功能:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box{
width:0;
height:0;
border-top:10px solid red;
border-left:10px solid transparent;
border-right:10px solid transparent;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
原理是让div的content为空, 利用边框的宽度和颜色实现这个原理.
其中值得注意的是
border-left:10px solid transparent;
transparent 就是与父级的背景色颜色相同.
2.png
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box{
width:100px;
height:30px;
border:1px solid #666;
box-shadow:1px 2px 3px #666;
position:relative;
background:#666;
opacity:0.5;
}
.sj{
width:20px;
height:20px;
position:absolute;
left:20px;
bottom:-12px;
transform:rotate(45deg);
background:#666;
overflow:hidden;
border-bottom:1px solid #c9e9c0;
border-right:1px solid #c9e9c0;
}
</style>
</head>
<body>
<div class="box">
<div class="sj">
</div>
</div>
</body>
</html>
这个的原理利用了 一些css3 的特性 使小方块div 旋转了45度 ,
然后给大的div加了一个边框阴影效果.
当把 bottom:-12px; 变成bottom:-24px; 的时候会更明显一点;
2.1.png
看明白了吗?o(￣▽￣)ｄ
网友评论