css的after右箭头,使用CSS3伪元素:after实现的三角箭头

CSS

语言：

CSSSCSS

确定

body {

background: #e1e1e1;

}

.container {

margin: 40px auto;

width: 600px;

border: 1px solid #eee;

padding: 10px;

}

.container:after {

clear: both;

content: "";

display: table;

}

.container img {

float: left;

}

.arrow-left {

position: relative;

width: 200px;

height: 200px;

background: #E9E9E9;

float: right;

}

.arrow-left:before {

z-index: 9999;

content: "";

display: block;

width: 0;

height: 0;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-right: 20px solid #E9E9E9;

position: absolute;

left: -20px;

top: 80px;

}

.arrow-right {

position: relative;

width: 200px;

height: 200px;

background: #fff;

float: left;

}

.arrow-right img {

float: right;

}

.arrow-right:after {

content: "";

display: block;

width: 0;

height: 0;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-left: 20px solid #fff;

position: absolute;

right: -20px;

top: 80px;

}