在CSS形状的中间创建文本

Question

.myButton {
  float: right;
  border-top: 40px solid pink;
  border-left: 40px solid transparent;
  border-right: 0px solid transparent;
  width: 25%;
}

<div class="myButton">
  Submit
</div>

以上是我的代码.正如你所看到的,我想设计一个如下图所示的形状,但我希望这个词Submit位于中心,但是它被推下来.有人知道解决方案吗？

Answer 1

您可以使用linear-gradient背景.Techique基于设置固定高度,然后应用padding等于height乘以?2:

.my-button {
  border: 0;
  height: 40px;
  background: linear-gradient(45deg, transparent 40px, pink 40px);
  padding-left: 56.5691px; /* 40 × ?2 ? 56.5691 */
}

<button class="my-button">Submit</button>

你也可以通过绝对位置pseudoelement来实现这个目的:

.my-button {
  background-color: pink;
  position: relative;
  height: 40px;
  margin-left: 40px;
  border: 0;
}

.my-button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Move pseudoelement to the left to 100% of its width */
  transform: translateX(-100%);
  border-top: 40px solid pink;
  border-left: 40px solid transparent;
  border-right: 0px solid transparent;
}

<button class="my-button">Submit</button>