html - Set background on pseudo element created arrow -
i have bunch of div content boxes. used pseudo before , after selectors create arrows each box. have put background colors content boxes. want put respective background color inside arrows also.
i tried it creates background color outside arrows not inside:
.timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n) .timeline-content.border-blue::before {background-color: blue;}
working solution..
html
<div class="container_24"> <div class="grid_24"> <section id="timeline"> <div class="content"> <div class="timeline"> <article class="post"> <div class="timeline-time"> <time>january, 2005-2010</time> </div> <div class="timeline-content tc-left bg-blue wow slideinleft" id="tc1"> <h2 class="entry-title"> title 1 goes here </h2> <div class="entry-content"> content 1 goes here </div> </div> </article><!-- .post --> <article class="post"> <div class="timeline-time"> <time>jan 1, 2005</time> </div> <div class="timeline-content bg-green wow slideinright" id="tc2"> <h2 class="entry-title"> title goes here </h2> <div class="entry-content"> <p>content 2 goes here</p> </div> </div> </article> <article class="post"> <div class="timeline-time"> <time>jan 1, 2006</time> </div> <div class="timeline-content tc-left bg-red wow slideinleft" id="tc3"> <h2 class="entry-title"> title goes here </h2> <div class="entry-content"> <p>content 3 goes here</p> </div> </div> </article><!-- .post --> <article class="post"> <div class="timeline-time"> <time>jan 1, 2008</time> </div> <div class="timeline-content bg-orange wow slideinright" id="tc4"> <h2 class="entry-title"> title goes here </h2> <div class="entry-content"> <p> content 4 goes here </p> </div> </div> </article> <article class="post"> <div class="timeline-time"> <time>jan 1, 2010</time> </div> <div class="timeline-content tc-left bg-gray wow slideinleft" id="tc5"> <h2 class="entry-title"> title goes here </h2> <div class="entry-content"> <p>content 5 goes here</p> </div> </div> </article><!-- .post --> </div><!-- end timeline --> </div><!-- end content --> </section><!-- end section -->
css
/************************* timeline styles *************************/ .timeline { padding: 20px 0; position: relative; } .timeline:before { background-color: #d2d2d2; background-color: rgba(0, 0, 0, 0.2); border-radius: 2px; content: ""; display: block; height: 100%; left: 50%; margin-left: -2px; position: absolute; top: 0; width: 4px; } .timeline .post { border: 0 none; margin: 0; padding: 0 40px 5px 0; width: 50%; } .timeline .post:last-child, .timeline .post:nth-child(even):last-child { padding-bottom: 0; } .timeline .post:nth-child(even) { margin-left: 50%; padding: 0 0 5px 40px; } .timeline .post:nth-child(even) .timeline-time { left: auto; margin: 31px 40px 0 0; right: 50%; text-align: right; } .timeline .post:nth-child(even) .timeline-content:before { border: 15px solid transparent; border-right-color: #ccc; left: -30px; right: auto; } .timeline .post:nth-child(even) .timeline-content:after { border: 14px solid transparent; left: -28px; right: auto; } .timeline .post .timeline-time { color: #999; left: 50%; margin: 31px 0 0 40px; position: absolute; } .timeline .post .timeline-content { border: 1px solid #ccc; border-radius: 3px; padding: 46px; position: relative; } .timeline .post .timeline-content:before, .timeline .post .timeline-content:after { border: 15px solid transparent; border-left-color: #ccc; content: ""; display: block; position: absolute; right: -30px; top: 26px; } .timeline .post .timeline-content:after { border: 14px solid transparent; right: -28px; top: 27px; } .tc-left {right: 40px;} .bg-blue {background: blue;} .bg-green {background: green;} .bg-red {background: red;} .bg-orange {background: orange;} .bg-gray {background: gray;} .timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n) .timeline-content.border-blue::before {background-color: #fff;border-left-color: blue;} .timeline .post:nth-child(2n) .timeline-content.bg-green::before, .timeline .post:nth-child(2n) .timeline-content.border-green::before {border-color: #fff;border-right-color: green;} .timeline .post:nth-child(3n) .timeline-content.bg-red::before, .timeline .post:nth-child(3n) .timeline-content.border-red::before {border-color: #fff;border-left-color: red;} .timeline .post:nth-child(4n) .timeline-content.bg-orange::before, .timeline .post:nth-child(4n) .timeline-content.border-orange::before {border-color: #fff;border-right-color: orange;} .timeline .post:nth-child(5n) .timeline-content.bg-gray::before, .timeline .post:nth-child(5n) .timeline-content.border-gray::before {border-color: #fff;border-left-color: gray;} check out fiddle too
Comments
Post a Comment