Question

我正在尝试使用引导程序对附加图片中可以看到的矩形进行编码。怎么会这样做？我应该使用图像还是有办法用CSS编写代码。我特别好奇，如何创建堆叠效果。非常感谢你的帮助。

example http://harbordev.com/example.png

Answer 1

试试这个：

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);
}

希望这可能有用

或者这是您更新的Fiddle

Answer 2

这个怎么样

Demo Fiddle

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;
}

附加图像的Bootstrap代码

2 个答案:

Demo Fiddle