html图片十字形,CSS3 十字架

CSS

语言：

CSSSCSS

确定

body {

background-color: #222;

}

.cross {

height: 400px;

width: 300px;

background-color: #111;

position: relative;

margin: 0 auto;

box-shadow: 0px 0px 30px #111, inset 0px 0px 10px #000;

margin-top: 2em;

}

.cross .long {

position: absolute;

top: 80px;

height: 220px;

width: 40px;

left: 50%;

margin-left: -30px;

background-color: #bada55;

border: 10px outset lime;

}

.cross .left,

.cross .right {

width: 60px;

height: 40px;

background-color: #bada55;

border: 10px outset lime;

z-index: 999;

top: 140px;

position: absolute;

}

.cross .long {

box-shadow: 0px 0px 80px #000;

}

.cross .left {

border-right: 0;

left: 60px;

}

.cross .right {

border-left: 0;

right: 60px;

}

.cross .left:after {

content: "";

display: block;

width: 0px;

height: 0px;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid lime;

position: absolute;

bottom: -14px;

right: -5px;

transform: rotate(270deg);

}

.cross .right:after {

content: "";

display: block;

width: 0px;

height: 0px;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #00ab00;

position: absolute;

top: -14px;

left: -5px;

transform: rotate(90deg);

}