这是我的 div 标签，我想在红色区域写你好。我该怎么写呢？请帮忙！
This is my div tag where I want to write hello on red area. How do I write it into that? Please help!
.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>
推荐答案
我使用了定位和伪元素来实现这个目标：
I've used positioning and a pseudo element to achieve this:
.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>
所以，如果你只想要'红色'部分，你最终会得到类似的东西：
So, if you only wanted the 'red' part, you would end up with something similar to this:
.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>