在CSS形状的中间创建文本

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您可以使用linear-gradient背景。 Techique基于设置固定高度，然后应用padding等于height乘以√2：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

你也可以通过绝对位置伪元素来实现这个目的：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你所拥有的问题是你使用的是顶部边框而不是背景，所以你的文字自然不会看起来像你的形状的中心。您可以做的是使用定位在形状内手动移动文本：

＆＃13;

＆＃13;

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

.inner {
  position: absolute;
  top: -30px;
  left: 40px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;