Как я мог сделать трапецию div

Question

Как я могу сделать эффект изображения ниже с помощью HTML, CSS, используя загрузочную среду?

Мне нужны два смежных делителя в форме трапеции (или разделенных диагональной линией).Оба должны иметь границу.

Answer 1

Вы можете сделать это, нарисовав фигуру в CSS.

Вы можете нарисовать такой треугольник в CSS, играя с разными границами (сверху, справа, снизу слева) элемента, который имеет нулевую ширину.

Пример: https://css -tricks.com / snippets / css / css-triangle /

В приведенном ниже примере я использую псевдоэлемент :after для этого эффекта:

/* Apply styles to both DIVs */
.container > div {
  width: 50%;
  float:left;
  font-weight: bold;
  padding-left: 10px;
  /* include padding in the height/width */
  box-sizing: border-box;
  margin: 0;
}

.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
  clear: both;
}

.container div:first-child {
  background: #66ff66;
  /* The triangle will be position:absolute, so it requires a `position:relative` parent */
  position: relative;
  /* We are drawing a full rectangle later, so we hide the rest of it */
  overflow: hidden;
}

.container div:last-child {
  background: #ff6666;
}

.container div:first-child:after {
  position: absolute;
  display: block;
  content: ' ';
  padding: inherit;
  box-sizing: border-box;

  /* Change below units (you can use px not just em) 
    to make the line  become at different angles */
  border-top: 1.3em solid transparent;
  border-bottom: 1.3em solid transparent;
  border-right: 1.3em solid #ff6666;

  right: 0;
  top: 0;
}

<div class="container">
	<div>div١</div>
	<div>div٢</div>
</div>

Обновление

Но, как вы указали в комментарии, вы хотели другой ответ, который использует div2 для треугольника, поэтому вот вы:

/* Apply styles to both DIVs */
.container > div {
  width: 50%;
  float:left;
  font-weight: bold;


  /* include padding in the height/width */
  box-sizing: border-box;
  margin: 0;
}

.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
  clear: both;
}

.container div:first-child {
  background: #66ff66;
  padding-left: 10px;

}

.container div:last-child {
  background: #ff6666;
  position: relative;
  padding-left: 1.3em;
}

.container div:last-child:before {
  position: absolute;
  content: '';.
  width: 0;
  height: 0;

  box-sizing: border-box;

  /* Change below units (you can use px not just em) 
    to make the line  become at different angles */
  border-top: 1.3em solid #66ff66;
  border-bottom: 1.3em solid transparent;
  border-right: 1.3em solid transparent;

  top: 0;
  left: 0;
}

<div class="container">
	<div>div١</div>
	<div>div٢</div>
</div>

Обновление 2

Изображение, которое вы показали в комментариях, также содержало реальные границы Это требует изменения подхода. Новый подход все еще использует :before, но добавляет к нему границу и поворачивает ее на 45 градусов.

Идея основана на примере из: https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/

Чтобы представить это:

Вот код:

/* Apply styles to both DIVs */
.container > div {
  width: 50%;
  float:left;
  font-weight: bold;


  /* include padding in the height/width */
  box-sizing: border-box;
  margin: 0;
}

.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
  clear: both;
}

.container div:first-child {
  background: #66ff66;
  padding-left: 10px;
  border: 1px solid;
  border-right: none;
}

/* 
  The following assumes diemnsions 1.3em * 1.3em
  Your real case can change the number
*/

.container div:last-child {
  background: #ff6666;
  position: relative;
  border: 1px solid;
  border-left: none;
  padding-left: calc(1.5 * 1.3em);
  overflow: hidden;
}

.container div:last-child:before {
  position: absolute;
  content: '';
  width: calc(2 * 1.3em);
  height: calc(2 * 1.3em);

  box-sizing: border-box;
  background: #66ff66;

  border: 1px solid ;
  transform:rotate(45deg);

  margin-top: -1.3em;
  margin-left: -1.3em;
  left: 0;
  top: 0;
}

<div class="container">
	<div>div١</div>
	<div>div٢</div>
</div>