html - CSS overlapping transparent arrow elements -



html - CSS overlapping transparent arrow elements -

is possible css? have attempted via before/after pseudo-elements, , while can work solid colors, having problem coming way transparency.

any suggestions?

if don't need black borders around each item (as can seen in posted image), still create needed shapes border follows:

class="snippet-code-css lang-css prettyprint-override">.timeline-unit:before, .timeline-unit:after { top: 0; border: solid transparent; border-width: 1.65em; height: 0; width: 0; position: absolute; pointer-events: none; } .timeline-unit:after { content: " "; left: 100%; border-left-color: rgba(51, 51, 51, 0.8); } .timeline-unit { position: relative; display: inline-block; background: rgba(51,51,51,.8); padding: 1em; line-height: 1.25em; color: #fff; } .timeline-unit:before { content: none; } .timeline-unit + .timeline-unit:before { content: " "; border-color: rgba(51, 51, 51, 0.8); border-left-color: transparent; border-right: 0; right: 100%; } .timeline-unit + .timeline-unit { margin-left: 2em; } /************** d e m o **************/ body { background: red; -webkit-animation: bgcolor 4s linear 0s infinite alternate; -moz-animation: bgcolor 4s linear 0s infinite alternate; -o-animation: bgcolor 4s linear 0s infinite alternate; animation: bgcolor 4s linear 0s infinite alternate; } @-webkit-keyframes bgcolor { { background: red; } { background: green; } } @-moz-keyframes bgcolor { { background: red; } { background: green; } } @-o-keyframes bgcolor { { background: red; } { background: green; } } @keyframes bgcolor { { background: red; } { background: green; } } class="snippet-code-html lang-html prettyprint-override"><div class="timeline-unit"> timeline 1 </div> <div class="timeline-unit"> timeline 2 </div> <div class="timeline-unit"> timeline 3 </div>

however if need add together border on each item, there 2 options:

using drop-shadow() filter false border - example here (supported in webkit/firefox35+). using css transforms in order create css shapes, border unused , available later usages (supported in ie9+ well).

html css css-shapes

Comments

Post a Comment

Popular posts from this blog

java Multi query from Mysql using netbeans -

java Multi query from Mysql using netbeans - i have java code retrieve info mysql appropriate code in netbeans.the code below. want multi query such illustration finding total number of products , on.could help me please. in advance import java.sql.*; public class javamysqlselectexample { public static void main(string[] args) { seek { string mydriver = "com.mysql.jdbc.driver"; string myurl = "jdbc:mysql://localhost/sample"; class.forname(mydriver); connection conn = drivermanager.getconnection(myurl, "root", "mypasscode1"); string query = "select * products"; statement st = conn.createstatement(); resultset rs = st.executequery(query); while (rs.next()==true) { int code = rs.getint("code"); string productname = rs.getstring("product_name"); string producttype = rs.getstring("product_type"); system.out.format(" %d, %s, %s\n", code, pr
Read more

c# - DotNetZip fails with "stream does not support seek operations" -

c# - DotNetZip fails with "stream does not support seek operations" - i using dotnetzip in c# unzip stream follows: public static void unzipfromstream(stream stream, string outdir) { //omit seek grab block using (zipfile zip = zipfile.read(stream)){ foreach (zipentry e in zip){ e.extract(outdir, extractexistingfileaction.overwritesilently); } } } stream obtained using webclient client = new webclient(); stream fs = client.openread(url); however, got next exception exception during extracting zip stream system.notsupportedexception: stream not back upwards seek operations. @ system.net.connectstream.get_position() @ ionic.zip.zipfile.read(stream zipstream, textwriter statusmessagewriter, encoding encoding, eventhandler`1 readprogress) on server side(asp.net mvc 4), returning filepathresult or filestreamresult both caused exception. should obtain stream differently on client side? or how create server homec
Read more

c++ - StartServiceCtrlDispatcher don't can access 1063 error -

c++ - StartServiceCtrlDispatcher don't can access 1063 error - i write on c++ service , have error, , don't can fixed it. my service main function int main (int argc, tchar *argv[]) {dword f; for(int i=0;i<113;i++) f = getlasterror(); servicepath = lptstr(argv[0]); outputdebugstring(_t("my sample service: main: entry")); //installservice(); service_table_entry servicetable[] = { {service_name, (lpservice_main_function) servicemain}, {null, null} }; // startservice(); if(!startservicectrldispatcher(servicetable)) { f = getlasterror(); //addlogmessage("error: startservicectrldispatcher"); } else if( memcmp(argv[argc-1],"install",7)) { installservice(); } else if( memcmp(argv[argc-1],"remove",6)) { removeservice(); } else if( memcmp(argv[argc-1],"start",5)) { startservice(); } else if( memcmp(argv[argc-1],"stop",4))
Read more