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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -