如何制作对角线div [英] how to make diagonal 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>

这篇关于如何制作对角线div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！