Загрузочный код для прикрепленного изображения

-1

Я пытаюсь закодировать прямоугольники, которые вы можете видеть в прикрепленном изображении с помощью бутстрапа. Как можно это сделать? Должен ли я использовать изображения для этого или есть способ кодировать это с помощью CSS. Особенно интересно, как создать эффект укладки. Большое спасибо за помощь.

пример http://harbordev.com/example.png

  • 0
    Вы можете опубликовать свой код?
  • 0
    Я возился с этим здесь. jsfiddle.net/t222kcgs
Показать ещё 1 комментарий
Теги:

2 ответа

0
Лучший ответ

Попробуй это:

HTML:

<div class="rectangle letter">
    <p>Lorem Ipsum</p>
</div>

CSS:

         .letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
}
.letter:before, .letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background-color: blueviolet;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: 275px;
  top: -295px;
  transform: rotate(0deg);
}
.letter:after {
  background-color: orange;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -275px;
  top: 1px;
  transform: rotate(0deg);
}

 .rectangle {
    margin: 50px;
  background-color: #f89131;
  position: absolute;
  width: 273px;
  height: 273px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rectangle p {

    padding: 110px;
    position: absolute;
    margin: auto;
    text-align: center;
    transform: rotate(-45deg);
}

Надеюсь, это может пригодиться

Или вот ваш обновленный скрипт

Поделиться
  • 0
    Вы потрясающие, большое спасибо за вашу помощь. Это очень круто, но теперь укладка происходит в одном месте. Я пытаюсь сложить их по диагонали, как на картинке. У вас есть идея для этого?
  • 0
    jsfiddle.net/52VtD/7476 Я думаю, что я получаю там. Но это не очень элегантно ...
Показать ещё 4 комментария
0

Как насчет этого

Демо-скрипт

HTML

<div class='wrapper'>
    <div class='row'>
        <ul>
            <li><span>Something</span>
            </li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class='row'>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class='row'>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

CSS

body {
    background:#aeaeae;
}
ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
li, .row {
    height:100px;
    width:100px;
    background:white;
    margin:5px;
}
li:nth-child(3n+1) {
    clear:both;
}
.row {
    background:none;
    transform:rotate(45deg);
    display:inline-block;
    height:300px;
    margin-left:50px;
    position:relative;
}
ul {
    position:absolute;
    top:0;
    left:0;
}
.wrapper {
    margin-left:50px;
}
li:hover {
    background:purple;
}
li:hover span {
    color:white;
}
li {
    text-align:center;
}
li span {
    transform:rotate(-45deg);
    display:block;
    position:relative;
    left:0px;
    top:40px;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню