html - CSS - 按钮的左边框在右侧变圆

Question

在 Ionic 移动应用程序中，我想为按钮添加一个粗的左 border。但是正如您在屏幕截图中看到的那样，左侧 border 的右侧似乎是圆形的。

我已经尝试通过将 border-radius 设置为 0 来解决这个问题，但这没有效果。

.button-viztype {
  height: 75px;
  font-size: 1.3em;
  border-style: solid;
  border-left-width: 7px;
  box-shadow: 0px 3px 1px #c3c3c3;
}
.button-distribution {
  border-left-color: #1B3D77;
}
.button-comparison {
  border-left-color: #397EF6;
}
.button-composition {
  border-left-color: #6181B8;
}
.button-relationship {
  border-left-color: #82ADF6;
}

<div class="row">
  <div class="col">
    <button class="button button-distribution button-full button-viztype">
      Distribution
    </button>
  </div>
  <div class="col">
    <button class="button button-comparison button-full button-viztype">
      Comparison
    </button>
  </div>
</div>
<div class="row">
  <div class="col">
    <button class="button button-composition button-full button-viztype">
      Composition
    </button>
  </div>
  <div class="col">
    <button class="button button-relationship button-full button-viztype">
      Relationship
    </button>
  </div>
</div>

Answer 1

您可以覆盖按钮边框:

https://jsfiddle.net/uwnyds3s/

.button-viztype {
    border: none;
    height:75px;
    font-size: 1.3em;
    border-left-style: solid;
    border-left-width: 7px;
    box-shadow: 0px 3px 1px #c3c3c3;
}