如何制作对角线div

本文介绍了如何制作对角线div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这是我的 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>