使用css3制作盒子

直接切图制作这样的盒子的话可能不用花很长的时间，但是使用css3的话却是可以大大加快页面加载速度的

所以尝试了一下，当然并不是出于加载速度的考虑，纯粹的因为shoujian

TOT

html:

<div class="registerGiftBox">

                        <div class="registerGift">

                            <div class="ding ding1 wow  animated" style="visibility: visible;"></div>

                            <div class="ding ding2 wow  animated" style="visibility: visible;"></div>

                            <div class="ding ding3 wow  animated" style="visibility: visible;"></div>

                            <div class="ding ding4 wow  animated" style="visibility: visible;"></div>

                            <div class="registerGiftInner">

                            </div>

                        </div>

                    </div>

.registerGiftBox {

1. position: relative;
2. width: 1200px;
3. height: 640px;
4. background-color: #d19a16;
5. margin: -50px auto 0;
6. border-radius: 20px;

}

registerGift {

1. position: relative;
2. width: 1200px;
3. height: 578px;
4. background-color: #f9b615;
5. border: 1px solid #f9b615;
6. border-radius: 20px;
7. margin: 0 auto;

}

.registerGift {

1. top: 62px;

}

.registerGiftInner {

1. width: 1152px;
2. margin: 25px auto 0;
3. height: 540px;
4. background-color: #fff;
5. border-bottom-left-radius: 20px;
6. border-bottom-right-radius: 20px;
7. box-shadow: inset 0 0 2px 6px #e6dfce;

}

钉子：

.registerGiftBox .ding, .vipBox .ding  {

1. position: absolute;
2. width: 42px;
3. height: 42px;
4. background: url(../images/border.png);
5. animation-delay: -.4s;

}

.registerGiftBox .ding2 {

1. right: 0;

}

.registerGiftBox .ding3 {

1. bottom: 0;

}

.registerGiftBox .ding4{

1. bottom: 0;
2. right: 0;

}

父部盒子的角

.registerGiftBox:before {

1. position: absolute;
2. content: '';
3. width: 0;
4. height: 0;
5. border-width: 0 0 75px 130px;
6. border-style: solid;
7. border-color: transparent transparent transparent #ee6728;

}

.registerGiftBox:after {

1. position: absolute;
2. content: '';
3. width: 0;
4. height: 0;
5. border-width: 0 130px 75px 0;
6. border-style: solid;
7. border-color: transparent #ee6728 transparent transparent;
8. top: -2px;
9. right: -5px;

}

绳子是下个盒子用伪类元素实现