Как сделать квадраты в квадрате?

Question

[tesko]

Есть вот такие квадраты.
1.

2.

Для первого квадрата использовать псевдо-элемент и повернуть как основной
Для вторых квадратов: кому-то из них поставить z-index, а дальше обоим через псевдо-элементы делать угольники, и также играться с z-index

Как реализовать вернее?

Comments

[WapSter]

так и делается.

[Модератор]

3.9. Использовать для вставки изображений тег < img> (размещение ссылок на изображения без использования тега < img> запрещено).

Answer 1

[lamer350]

Comments

[tesko]

Спасибо. А вторые квадраты под номером 2?)

Answer 2

[a_gold1]

<div class="square">
	<div class="square1">45</div>
</div>

.square {
  	height: 150px;
  	width: 150px;
  	background: #ccc;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;

  }
  .square1 {
  	background: orange;
  	width: 90px;
  	height: 90px;
  	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
  }