如何制作对角线div

Question

这是我的div标签，我想在红色区域上打招呼。我该怎么写呢？请帮忙！

.arrow-right {
  height: 100px;
  margin-left: 10px;
  background-color: blue;
  border-top: 170px solid red;
  border-right: 170px solid orange;
  width: 200px;
  padding-top: -190px;
}

<div class="arrow-right">Hello</div>

Answer 1

我使用了定位和伪元素来实现这个目标：

.arrow-right {
  height: 100px;
  margin-left: 10px;
  background-color: blue;
  border-top: 170px solid red;
  border-right: 170px solid orange;
  width: 200px;
position:relative;
}
.arrow-right:before{
  content:"hello";
  position:absolute;
  top:-170px;
  font-size:50px
  }

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

---

所以，如果你只想要“红色”部分，你最终会得到类似的东西：

.arrow-right {
  height: 1px;
  background-color: transparent;
  border-top: 170px solid red;
  border-right: 170px solid transparent;
  width: 200px;
position:relative;
}
.arrow-right:before{
  content:"hello";
  position:absolute;
  top:-170px;
  font-size:50px
  }

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