CSS花招|横线截断图片效果

在写小程序的时候，偶然发现的，挺有意思的

效果

html结构

 <view class="icons">
      <view class="circle">
      <image class="icon" src="/images/icon/collection-anti.png"></image>
      <image class="icon" src="/images/icon/share-anti.png"></image>
      </view>
      <view class="horizon"></view>
</view>

css

.icons{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.icon{
  
  padding-right: 20rpx;
  width: 90rpx;
  height: 90rpx;
}
.circle{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.horizon{
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  position: absolute;
  z-index: -2;
}

用定位也可以实现，但是大家现在都喜欢flex一把梭，核心就是大盒子flex，让两个小盒子居中，然后再让线脱离文档流，还有一个就是width100%然后高度1px就可以弄出一条线来