I want to create a border (camera type) with 3 colors (blue, white and red).
I created this HTML code :
<div >
<div ><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 :
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 ?
I didn't manage to get the desired result, who has a solution ? Thanks
CodePudding user response:
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="#" >This is my link<a>