2

Есть тренировочный макет который пытаюсь сверстать. Но проблема в том , что не получается ромбы разместить по диагонале, как на картинке. При этом знаю что это можно сделать через позишн - абсолют. А кроме позишина есть, ли варианты ?

макет по котором делаю

вот мой код :

@charset "utf-8";
 html,
body {
  width: 1920px;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
.top_baner {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background-image: url(../img/baner_top.png);
  padding: 155px;
  background-repeat: no-repeat;
}
.top_baner > .content_wrapper {
  margin: 0 auto;
  padding: 0;
  width: 1214px;
}
.top_baner > .content_wrapper > .top_line {
  width: inherit;
  background-image: url(../img/Top_logo.png);
  background-repeat: no-repeat;
  background-position: 0% 100%;
  margin: 0 auto;
  padding: 0;
  height: 81px;
}
.top_baner > .content_wrapper > .top_line > p {
  margin: 0 0 0 0;
  padding: 63px 0 0 42px;
  font-size: 14px;
  color: white;
  display: block;
  text-align: left;
}
.top_baner > .content_wrapper > h1 {
  margin: 207px 0 0 0;
  padding: 0 0 0 0;
  font-size: 48px;
  color: white;
  display: block;
  text-align: left;
}
.top_baner > .content_wrapper > h2 {
  margin: 50px 0 0 0;
  padding: 0 0 0 0;
  font-size: 16px;
  color: white;
  display: block;
  text-align: left;
}
.top_baner > .content_wrapper > hr {
  display: block;
  width: 20px;
  border: none;
  height: 1px;
  background: white;
  margin: 40px 0px auto;
}
.top_baner > .content_wrapper > a {
  text-decoration: none;
  color: white;
  padding: 0;
  width: 157px;
  height: 60px;
  display: block;
  font-size: 12px;
  line-height: 5.5;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  margin: 40px 0 0 0;
}
.second_block {
  clear: both;
  width: 1920px;
  height: 1200px;
  margin: 0 auto;
  padding: 0;
  background: #f6f6f6;
}
/*Second_block*/

.second_block > .content_wrapper {
  margin: 0 auto;
  padding: 0;
  width: 1214px;
}
.second_block > .left_block {
  /* display: inline-block; */
  float: left;
  width: 441px;
  margin: 290px 0 0 0;
  padding: 0;
  text-align: left;
}
.second_block > .left_block > h1 {
  font-size: 53px;
  margin: 0 auto;
  padding: 0;
}
.second_block > .left_block > hr {
  display: block;
  width: 20px;
  border: none;
  height: 1px;
  background: #000000;
  margin: 16px 0 auto;
}
.second_block > .left_block > h2 {
  font-size: 18px;
  margin: 55px 0 0 auto;
  padding: 0;
}
.second_block > .right_block {
  /* clear: both; */
  float: right;
  /* width: 1567px; */
  display: inline-block;
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(135deg);
}
/*.right_block > ul:first-child {
	height: 545px;
	width: 1145px;
	margin:0 auto;
	padding: 56px 0;
}


.right_block > ul:last-child.{
    height: 150px;
    width: 1140px;
    padding: 0 0 0 0;
    margin: 0 0 0px 0;
}
*/

.second_block > .right_block > .firsrt_bloks > li {
  list-style-type: none;
  margin: 0 0 auto;
  padding: 0;
}
.second_block > .right_block > .sekond_block > li {
  list-style-type: none;
  margin: 0 0 auto;
  padding: 0;
}
.second_block > .right_block > ul > li > a {
  width: 270px;
  height: 270px;
  padding: 0;
  margin: 8px 3px auto;
  background: #FFFFFF;
  display: block;
  float: left;
}
.firsrt_bloks {
  clear: both;
  width: 928px;
  margin: 0 auto;
  padding: 0 0;
  padding-top: 284px;
  height: 206px;
}
.sekond_block {
  height: 215px;
  width: 928px;
  padding: 0 0 0 0;
  margin: 0 0 0px 551px;
  clear: both;
}
.second_block > .right_block > .serd_blog > li {
  list-style-type: none;
  margin: 0 0 auto;
  padding: 0;
}
.serd_blog {
  height: 241px;
  width: 552px;
  padding: 0 0 0 0;
  margin: 0 0 0px 0;
  clear: both;
}
<body>
  <div class="top_baner">
    <div class="content_wrapper">
      <div class="top_line">
        <p>Logo goes here</p>
      </div>
      <h1> So begins a new age 
of knowledge </h1>
      <h2>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nulla quis</br> turpis cursus pharetra. Fusce blandit nec tortor sit amet ullamcorper. </h2>
      <hr noshade> <a href="#" title=""> PRojects </a> 
    </div>
  </div>
  <div class="second_block">
    <div class="left_block">
      <h1>OUR SERVICES</h1>
      <hr noshade>
      <h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt sit amet erat malesuada interdum. Aenean sodales dui quis leo fermentum scelerisque. Fusce condimentum dolor justo, ac tristique diam iaculis at.   </h2> 
    </div>
    <div class="right_block">
      <ul class="firsrt_bloks">
        <li>
          <a class="rectangle"></a>
        </li>
        <li>
          <a class="rectangle"></a>
        </li>
        <li>
          <a class="rectangle"></a>
        </li>
      </ul>
      <br>
      <ul class="sekond_block">
        <li>
          <a class="rectangle"></a>
        </li>
        <li>
          <a class="rectangle"></a>
        </li>
        <li>
          <a class="rectangle"></a>
        </li>
      </ul>
      <br>
      <ul class="serd_blog">
        <li>
          <a class="rectangle"></a>
        </li>
        <li>
          <a class="rectangle"></a>
        </li>
      </ul>
    </div>
  </div>
</body>

1

1 ответ 1

1

html {
  font-size: 1.75vw;
}

section:after {
  content: "";
  clear: left;
  display: block;
}

section:first-child {
  margin-top: 4em;
}

section:nth-child(odd) {
  padding-left: 6em;
}

section > div {
  transform: rotate(45deg);
  border: 1px solid;
  background: silver;
  float: left;
  height: 8em;
  width: 8em;
  margin: -2em 2em 0;
}

section > div > div {
  transform: rotate(-45deg);
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 8em;
}
<section>
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
</section>
<section>
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
</section>
<section>
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
</section>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.