两个三角形拼成一个长方形
Two triangles to make a rectangle
我正在尝试将两个三角形拼成一个矩形。然后我想将内容放入每个三角形。我从这里开始关注上一个问题的答案:.
我的问题是如果高度不是很大,我无法将矩形设置为 width: 80vw
。然后,我不确定如何将内容放入后元素中,或者这是否是最好的设计方式,因为我知道我会将内容放入三角形中。
有谁知道我该怎么做或有更好的解决方案吗?
#tierBoxSec {
position: relative;
height: auto;
width: 100%;
}
.box {
width: 80vw;
height: 200px;
background: radial-gradient(at top left, #FFF 49%, #b82222 50%, #b82222 100%);
}
<section id="tierBoxSec">
<div class="box"></div>
</section>
我做了一个片段更好地说明了如何使用线性渐变来做到这一点:
red 50%, blue 50%
正在为每种颜色设置 50% 的“色标”,这意味着它们不会继续超过渐变区域的 50%。例如,您可以通过执行类似 red 25%, blue 25%
的操作来创建不同的分界线。
#box {
width: 100px;
height: 100px;
background: linear-gradient(45deg, red 50%, blue 50%);
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient -->
<body>
<div id="box">
</div>
</body>
以下是线性渐变解决方案的改进,具有响应块:
.box {
width: 80vw;
height: 80vh;
background: linear-gradient(to top right, red 49.9%, blue 50.1%);
}
<div class="box"></div>
这是一个使用 border
s 和 box-sizing
的解决方案:
#box {
height: 8vh;
width: 80vh;
box-sizing: border-box;
background: red;
border-style: solid;
border-width: 8vh 80vh;
border-color: blue red red blue;
}
<div id="box"></div>
⋅
⋅
⋅
如果你真的想要两个不同的三角形,这里是上面的 "forked" 解决方案,使用 ::after
伪元素:
#box {
position: relative;
height: 8vh;
width: 80vh;
box-sizing: border-box;
border: solid transparent;
border-width: 8vh 80vh;
border-top-color: blue;
border-right-color: blue;
}
#box::after {
position: absolute;
content: '';
border: solid transparent;
border-width: 8vh 80vh;
border-bottom-color: red;
border-left-color: red;
transform: translate(-50%, -40%); /* Change -40% to -50% if you want the two triangle to stick */
}
<div id="box"></div>
<br>
(I've let a space just to show you)
希望对您有所帮助。
我正在尝试将两个三角形拼成一个矩形。然后我想将内容放入每个三角形。我从这里开始关注上一个问题的答案:
我的问题是如果高度不是很大,我无法将矩形设置为 width: 80vw
。然后,我不确定如何将内容放入后元素中,或者这是否是最好的设计方式,因为我知道我会将内容放入三角形中。
有谁知道我该怎么做或有更好的解决方案吗?
#tierBoxSec {
position: relative;
height: auto;
width: 100%;
}
.box {
width: 80vw;
height: 200px;
background: radial-gradient(at top left, #FFF 49%, #b82222 50%, #b82222 100%);
}
<section id="tierBoxSec">
<div class="box"></div>
</section>
我做了一个片段更好地说明了如何使用线性渐变来做到这一点:
red 50%, blue 50%
正在为每种颜色设置 50% 的“色标”,这意味着它们不会继续超过渐变区域的 50%。例如,您可以通过执行类似 red 25%, blue 25%
的操作来创建不同的分界线。
#box {
width: 100px;
height: 100px;
background: linear-gradient(45deg, red 50%, blue 50%);
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient -->
<body>
<div id="box">
</div>
</body>
以下是线性渐变解决方案的改进,具有响应块:
.box {
width: 80vw;
height: 80vh;
background: linear-gradient(to top right, red 49.9%, blue 50.1%);
}
<div class="box"></div>
这是一个使用 border
s 和 box-sizing
的解决方案:
#box {
height: 8vh;
width: 80vh;
box-sizing: border-box;
background: red;
border-style: solid;
border-width: 8vh 80vh;
border-color: blue red red blue;
}
<div id="box"></div>
⋅ ⋅ ⋅
如果你真的想要两个不同的三角形,这里是上面的 "forked" 解决方案,使用 ::after
伪元素:
#box {
position: relative;
height: 8vh;
width: 80vh;
box-sizing: border-box;
border: solid transparent;
border-width: 8vh 80vh;
border-top-color: blue;
border-right-color: blue;
}
#box::after {
position: absolute;
content: '';
border: solid transparent;
border-width: 8vh 80vh;
border-bottom-color: red;
border-left-color: red;
transform: translate(-50%, -40%); /* Change -40% to -50% if you want the two triangle to stick */
}
<div id="box"></div>
<br>
(I've let a space just to show you)
希望对您有所帮助。