收藏
回答

【已解决】利用border绘制不规则view时,实际的width存在误差

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 工具 7.0.13 2.12.0

WXML:



WXSS:


.intro {
  height: 62.5px;
  width: 171.5px;
  border-radius: 4px;
  background-color: #3A6EC4;
  overflow: hidden;
  position: relative;
  margin: auto;
  padding: 0;
}

.redLadder {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 96px;
  border-top: 62.5px solid red;
  border-right: 20.5px solid transparent;
  padding: 0;
  margin: 0;
}



我希望绘制一个上边长度是192rpx,下边是151rpx,高度是125rpx的直角梯形。根据网上教程用border绘制,结果发现实际运行结果绘制出来的梯形宽度存在20px的误差。这个误差试过padding设0以及margin设0等操作依然无法排除。

下面放一些尝试过程图。

p.s. view的width应该是不包含Border的宽度吧。绘制不规则图形的时候,整体的width应该理解为最短边,还是最长边呢。

上面是rpx的版本



上面是特地改成px,然后加了padding和margin:0的版本



萌新不懂求助社区,恳请指点

最后一次编辑于  2020-07-29
回答关注问题邀请回答
收藏

1 个回答

  • 清水裕夏
    清水裕夏
    2020-07-29

    box-sizing: border-box;

    加上这个就解决了 抱歉占用大家时间 我来关闭这个问题

    2020-07-29
    有用
    回复
登录 后发表内容
问题标签