html - CSS3 effect not Working -
i created site. , call image div css
.header_bottom_area { background: url(../img/homepagepanels.jpg)no-repeat scroll center center; max-width: 100%; width: auto; height: 911px; }
and want image same link possible css? thanks
the following css should started (where .sample-box class applied image or it's containing div):
.sample-box { background-color: rgba(255, 0, 0, 0.5); height: 200px; width: 400px; } .sample-box::before { position: absolute; display: block; width: 0; height: 0; margin-top: 150px; /* same height of ::before item */ margin-left: 0px; /* (padding * -1) of main element */ content: ""; border-width: 0px; border-style: solid; border-color: transparent; border-left-width: 400px; /* (width + padding) of main element */ border-bottom-width: 50px; /* height of "mask" */ border-bottom-color: rgba(255, 255, 255, 1.0); /* color of "mask" */ } .sample-box::after { position: absolute; display: block; width: 0px; height: 0px; margin-top: 132px; /* adjust make work */ margin-left: 0px; /* position ::after item horizontally */ content: ""; border-width: 0px; border-style: solid; border-color: transparent; border-right-width: 400px; /* (width + padding) of main element */ border-bottom-width: 50px; /* height of "mask" */ border-bottom-color: rgba(255, 255, 255, 1.0); /* color of "mask" */ }
Comments
Post a Comment