Два треугольника, чтобы сделать прямоугольник - PullRequest
Новая
       6

Два треугольника, чтобы сделать прямоугольник

0 голосов
/ 08 июня 2018

Я пытаюсь получить два треугольника, чтобы сделать прямоугольник.Затем я хочу поместить контент в каждый треугольник.Отсюда я следую за ответом на предыдущий вопрос: Предыдущий вопрос .

Моя проблема в том, что я не могу получить прямоугольник width: 80vw без большой высоты.Тогда я не уверен, как я могу поместить контент в элемент after или это даже лучший способ спроектировать это, зная, что я буду помещать контент в треугольники.

Кто-нибудь знает, как я могу это сделать?это или есть лучшие решения? 

#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>

Ответы [ 3 ]

0 голосов
/ 09 июня 2018

Вот улучшение для линейно-градиентного решения, имеющего реагирующий блок: 

.box {
  width: 80vw;
  height: 80vh;
  background: linear-gradient(to top right, red 49.9%, blue 50.1%);
}
<div class="box"></div>
0 голосов
/ 11 июня 2018

Вот решение с использованием 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>

⋅ ⋅ ⋅

Если вы действительно хотите два отличающихся треугольника, вот «разветвленное» решение выше, с использованием ::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)

Надеюсь, это поможет.

0 голосов
/ 08 июня 2018

Я сделал фрагмент лучше, иллюстрирующий, как это сделать с линейными градиентами:

red 50%, blue 50% устанавливает «остановку цвета» в 50% для каждого цвета, то есть они не будут продолжаться после 50% от площади градиента.Вы можете создать разные линии разграничения, например, red 25%, blue 25%. 

#box {
  width: 100px;
  height: 100px;
}#box {
  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>
...