Question

我有以下CSS和HTML来制作一个三角形＆＃39; DIV：

＆＃13;

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

＆＃13;

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

＆＃13;

问题是我希望在div（三角形的中心）内部有文字（一个单词），但它会打破三角形并放在它旁边。

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>

你想要这个输出吗？

Answer 2

你只能把这个css放在p标签中：

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

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

Answer 3

实现此目的的最简单方法是将元素相对于其原始位置

定位

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

请尝试使用以下代码...

＆＃13;

### So for example (eg. IP:  54.33.123.21) :
54.33.123.21/site1 > should access /var/www/html/site1
54.33.123.21/site2 > should access /var/www/html/site2

＆＃13;

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

＆＃13;

Answer 5

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

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

否则你可以这样做。将position:relative css规则添加到.arrow-right，然后将“.arrow-right p”的css规则写为position:absolute;left: 15px;top: 40px;

三角形div内的按钮

5 个答案: