在 CSS 形状中间制作文本答案

【问题标题】：Make text in the middle of CSS shapes在 CSS 形状中间制作文本
【发布时间】：2017-07-13 10:14:46
【问题描述】：

.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 位于中心但它被推下。有人知道解决办法吗？

【问题讨论】：

您可以将文本放在div 中，并使用position:absolute; 调整它在div 中的位置。
Absolute positioning的可能重复

标签： html css ionic-framework css-shapes

【解决方案1】：

您可以为此使用linear-gradient 背景。技术基于设置固定高度，然后应用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 */
}

&lt;button class="my-button"&gt;Submit&lt;/button&gt;

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

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

&lt;button class="my-button"&gt;Submit&lt;/button&gt;

【讨论】：

【解决方案2】：

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

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

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

【讨论】：