实现效果图如下:
实现代码:
HTML
<div id="temperature"> <div id="normalv"> </div> <div id="tmpbottom"> </div> </div>
CSS
#temperature{ position: relative; width:20px; height:286px; background-color: red; margin-top:46px; margin-left:150px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; float:left; } #tmpbottom{ position: absolute; width:40px; height:40px; border-radius: 20px; bottom: 0; background-color: #95F204; margin-left:-10px; } #normalv{ position: absolute; width:18px; height:200px; background-color: #95F204; margin-left:1px; bottom: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
如需完整代码,请点击购买!谢谢支持!