Question

我有一堆div内容框。我还在选择器之前和之后使用伪为每个盒子创建箭头。现在我已经为内容框添加了背景颜色。我想将相应的背景颜色放在箭头内。

我尝试了这个但是它在箭头之外创建了背景颜色而不是在里面：

.timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n) .timeline-content.border-blue::before {background-color: blue;}

Answer 1

你正在以一种奇怪的方式制作箭头。

这是最常用的方法。

＆＃13;

.content {
  width: 50%;
  height: 100px;
  background: orange;
  margin: 10px auto;
  position: relative;
}
.content:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  top: 10px;
}
.left:before {
  right: 100%;
  border-right-color: orange;
}
.right:before {
  left: 100%;
  border-left-color: orange;
}

＆＃13;

<div class="content left">
</div>

<div class="content right">
</div>

＆＃13;

Answer 2

工作解决方案..

<强> 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;}

请查看此Fiddle

在伪元素创建箭头上设置背景

2 个答案: