css背景图像变换比例显示不需要的线

Question

html css 变换比例显示不需要的行与div上的背景图像源

背景源图像div在设置变换比例图像时显示不需要的线。

这里是JSFIDDLE以便最好地理解问题。 这是image问题。

任何人都可以帮我解决这个问题。它显示不需要的线条设置缩放到场景。

＆＃13;

＆＃13;

#img_box{
 width:280px;
 height:42px;
 position: relative;
 margin-bottom:40px;
}
.resize_horizontal{
 width:100%;

}

.overlay{
  height: 42px;
  line-height: 42px;
  text-align: center;
  position: absolute;  
  width: 100%;
}
.resize_vertical{
 height:42px;  
 width:100%;
 position: absolute;
 
}

.topDiv1 {
    margin: -5px 30px 50px;
    width: 300px;
    height:20px;
    //transform:scale(1.5);
}

#dropDown1 {
    width: 100%;
    height: 100%;
    border-image-source: url(http://localhost:8090/resources/graphics/theme/yellow/roundedCornersFlat/drawable-hdpi/dropdown.png);
    border-style: solid;
    border-width: 5px 35px 5px 5px;
    border-image-slice: 10 45 10 10 fill;
}

.topDiv2 {
     margin: 30px;
    width: 300px;
    height:20px;
    transform:scale(1.3);
}

#dropDown2 {
    width: 100%;
    height: 100%;
    border-image-source: url(http://localhost:8090/resources/graphics/theme/yellow/roundedCornersFlat/drawable-hdpi/dropdown.png);
    border-style: solid;
    border-width: 5px 35px 5px 5px;
    border-image-slice: 10 45 10 10 fill;
}

.divoverlay{
  text-align:center;
}

＆＃13;

<h5>
Orginal image setted in background
</h5>
<div id="img_box">
 <img class="resize_vertical" src="http://localhost:8090/resources/graphics/theme/yellow/roundedCornersFlat/drawable-hdpi/dropdown.png" />
 <div class="overlay">hai</div>
</div>
<h5>
  image setted in background with stretch 
</h5>
<div class="topDiv1">
  <div id="dropDown1">
  <div class="divoverlay">hai</div>
  </div>
</div>
<h5>
 Image setted in background with transform scale
</h5>
<div class="topDiv2">
  <div id="dropDown2">
    <div class="divoverlay">The problem is here while scale transform
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;