前端開發(fā)工作中經常會有這樣的開發(fā)需求,如下圖所示:
1.png
接下來我們用代碼來實現(xiàn)以下這個功能:
<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為空, 利用邊框的寬度和顏色實現(xiàn)這個原理.
其中值得注意的是
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(￣▽￣)ｄ
