When I try to set a border-image CSS value to <code c

CSS border-image doesn't work about react-vertical-timeline HOT 1 CLOSED

stephane-monnot commented on May 30, 2024

CSS border-image doesn't work

from react-vertical-timeline.

Comments (1)

stephane-monnot commented on May 30, 2024 1

I tried your code sample, if I change border: 10px 0 0 0; to border: 10px solid transparent;, and add border-image-slice: 1;, I get :

But I think you want to create a border inside, right ? If so, I recommend you to create a div (wrapper) inside the vertical-timeline-element-content element and remove the padding of .vertical-timeline-element-content.

<VerticalTimelineElement
  className="vertical-timeline-element--work"
  date="2011 - present"
  iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
  icon={<WorkIcon />}
>
  <div className="vertical-timeline-element-content-box">
    <h3 className="vertical-timeline-element-title">Creative Director</h3>
    <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
    <p>
      Creative Direction, User Experience, Visual Design, Project Management, Team Leading
    </p>
  </div>
</VerticalTimelineElement>

.vertical-timeline-element {
  .vertical-timeline-element-content-box {
    padding: 1em;
    border-radius: 0.25em;
    border: 4px solid transparent;
    border-image: linear-gradient(to right, #000000, #0098ED);
    border-image-slice: 1;
  }

  .vertical-timeline-element-content::before {
    border-left-color: #0098ED;
  }

  @media only screen and (min-width: 1170px) {
    .vertical-timeline-element-content .vertical-timeline-element-date {
      left: 136%;
    }

    &:nth-child(even):not(.vertical-timeline-element--left) .vertical-timeline-element-content .vertical-timeline-element-date, .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content .vertical-timeline-element-date {
      right: 136% !important;
    }
  }
}