Make text in the middle of CSS forms

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>

Run codeHide result

This is my code. As you can see, I want to create a shape like the image below, but I want the word to Submitbe in the center, but to be pressed down. Does anyone know a solution?

Answer 1

You can use the background for this linear-gradient. Techique is based on a fixed height setting and then paddingequals heightmultiplied by √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>

Run codeHide result

You can also achieve this by absolutely pseudo positioning:

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

Run codeHide result

Answer 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>

Hide result