Search code examples
htmlcsscolorsborder

How to create a border (camera type) with 3 colors?

I want to create a border (camera type) with 3 colors (blue, white and red).

I created this HTML code:

<div class="reinsurance-offer">
    <div class="reinsurance-offer-link"><a href="/node/133" hreflang="fr">Faites la promotion de vos événements</a></div>
</div>

I applied this CSS:

#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer {
    background-color: #f7f9fa;
    padding-right: 2.25rem;
    padding-left: 2.25rem;
    padding-top: 1.6875rem;
    padding-bottom: 1.6875rem;
    text-align: center;
}

#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link {
    display: inline-flex;
    padding: 0.75rem;
    border: 5px solid;
    border-color: #E20E17 #1F71B8;
    background-color: #ffffff;
}

Here is the rendering :

enter image description here

I want to make the same display as in the image below, without the blur effect.

How can I do this in CSS and is it possible?

enter image description here

I didn't manage to get the desired result

Solution

  • i'm not really sure where you want to use this, but what about something like this:

    .link {
  --link-border-width: 5px;
  color: grey;
  position: relative;
  width: fit-content;
  display: block;
  padding: .5rem 1rem 0;
  text-decoration: none;
}

.link::before,
.link::after {
  content: "";
  height: 100%;
  width: calc(100% / 3);
  border: 4px solid red;
  display: block;
  position: absolute;
  top: 0;
}

.link::before {
  border: var(--link-border-width) solid blue;
  border-right: none;
  left: 0;
}

.link::after {
  border: var(--link-border-width) solid red;
  border-left: none;
  right: 0;
}
    <a href="#" class="link">This is my link<a>