实现效果图如下：
实现代码：
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;
}如需完整代码，请点击购买！谢谢支持！