html - Z-index not working on pseudo-element with clip-path -


i'm trying create border clip path using pseudo-elements. have tried change positioning in them , pseudoelement still stay on top of it. how can change this? can see code in here.

#shield {    z-index: 1;    background-color: red;    box-shadow: 1px 1px 1px black;    background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/bras%c3%a3o_porto_feliz.png");    background-size: 50%;    background-repeat: no-repeat;    background-position: center;    background-blend-mode: multiply;    display: inline-block;    height: 120px;    width: 200px;  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);  }    #logo {    width: 100px;    height: 100px;  }  #shield::before {    top: 0;    left: 0;    transform: scale(1.2);    content:"";    display: block;      width: 100%;    height: 100%;    background-color: black;    position: absolute;    z-index: -1;       }
		      <div class="navbar-brand navbar-brand-centered" id="shield">            </div>

to see wanted in top of things, delete ::before element

full example in here

thanks in advance :)

just flip around. use background image in ::after , black color actual div.

#shield {    z-index: 1;    background-color: black;    box-shadow: 1px 1px 1px black;    position: relative;            display: inline-block;    height: 120px;    width: 200px;  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);  }    #logo {    width: 100px;    height: 100px;  }  #shield::before {    top: 0;    left: 0;    transform: scale(1.2);    content:"";    display: block;      width: 100%;    height: 100%;    background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/bras%c3%a3o_porto_feliz.png");    background-repeat: no-repeat;    background-position: center;    background-blend-mode: multiply;        position: absolute;    z-index: 1;     background-size: 50%;  }
<div id="shield"></div>


Comments

Post a Comment

Popular posts from this blog

'hasOwnProperty' in javascript -

i use obj.hasownproperty judge whether object has property, when replaced obj[prop] !== undefined , not normal implementation, ask, why behind method can not use it? object.hasownproperty(prop); object[prop] !== undefined; obj[prop] !== undefined wrong 2 reasons: you can explicitly set property undefined , obj[prop] = undefined; . obj.hasownproperty(prop) return true in case. obj[prop] follow prototype chain, return property that's inherited. obj.hasownproperty(prop) returns true if property exists directly in object, returns false inherited properties.
Read more

python - ValueError: No axis named 1 for object type <class 'pandas.core.series.Series'> -

i´m new programming. i´m trying use scipy minimize, had several issues , gotten through of them. right code, i'm not understanding why i´m getting error. par_opt = so.minimize(fun=fun_obj, x0=par_ini, method='nelder-mead', args=[series_pt_cal, dt, series_caudal_cal]) not enough info given op, somewhere in code it's specified operate data frame column (axis=1) on object pandas series. if code typically works occasional gives errors, check degenerative cases data frame may have 1 row. pandas has nasty habit of guessing want -- may decide reduce 1-row data frame series (e.g., apply() function; can disable using reduce=false in there). add line of code check object isinstance(df, pd.dataframe) or else convert offending pandas series data frame, s.to_frame().t problems had deal with.
Read more

java - How to provide dependency injections in Eclipse RCP 3.x? -

everyone! i'm trying deal eclipse rcp 3.x application. i've read lot of articles dependency injection in rcp e4 applications. can use di in rcp 3.x apps? i found perfect link di in e4. idea how use in rcp 3.x app? first of all, i'm interested in own objects injection (btw, how add own object application context?). best regards in 3.x code can ieclipsecontext necessary use contextinjectionfactory using ieclipsecontext workbenchcontext = platformui.getworkbench().getservice(ieclipsecontext.class); to workbench context. in view or editor can current part context using: ieclipsecontext partcontext = getsite().getservice(ieclipsecontext.class);
Read more