html - 三 Angular 形 div 内的按钮

Question

我有以下 CSS 和 HTML 来制作“三 Angular 形”div:

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
}

<div class="arrow-right">
  <p>next</p>
</div>

问题是我想在 div(三 Angular 形的中心)内放置文本(一个词)，但它打破了三 Angular 形并放在它旁边。

Answer 1

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
  position:relative;
}
.arrow-right p{
      position: absolute;
    top: -24px;
    left: -50px;
  }

<div class="arrow-right">
  <p>next</p>
</div>

你想要这个输出吗？