Issue
how do I adjust the border according to the border-radius,
do I need the border to adapt according to the border radius... ...
<div class="flex">
<div class="pil1">
<h1>a=Content</h1>
</div>
<div class="pil2">
<h1>sad</h1>
</div>
</div>
.flex {
display: flex;
height: 207px;
border-radius: 107px;
border: 10px solid transparent; /* Set the border color to transparent */
background: linear-gradient(to right, gold, yellow); /* Add linear gradient background */
}
.pil1, .pil2 {
height: 100%;
width: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.pil1 {
border-top-left-radius: 104px;
border-bottom-left-radius: 104px;
background-image: url("../images/backgrounds/main_banner_bg_left_no_border.svg");
}
.pil2 {
border-top-right-radius: 104px;
border-bottom-right-radius: 104px;
background-image: url("../images/backgrounds/main_banner_bg_right_no_border.svg");
}
@media screen and (max-width: 900px) {
.flex {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
border: none !important;
background: none;
}
.pil1, .pil2 {
position: relative;
width: 100%;
border-radius: 104px;
background-image: url("../images/backgrounds/main_banner_bg_mobile_no_border.svg");
background-size: cover;
}
.pil1::before,
.pil2::before,
.pil1::after,
.pil2::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: inherit;
border: 4px solid transparent; /* Set the border color to transparent */
}
.pil1::before,
.pil2::before {
border-image: linear-gradient(to right, gold, yellow); /* Add linear gradient border */
border-image-slice: 1; /* Ensure the entire border is used for the gradient */
}
}
Solution
I add code below
.grounded-radiants {
position: relative;
border: 8px solid transparent;
border-radius: 16px;
background: linear-gradient(orange, green);
background-clip: padding-box;
padding: 10px;
/* just to show box-shadow still works fine */
box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
.grounded-radiants::after {
position: absolute;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
background: linear-gradient(red, blue);
content: "";
z-index: -1;
border-radius: 16px;
}
<p class="grounded-radiants">
Some text is here.<br />
There's even a line break!<br />
so cool.
</p>
I hope my answer can help you.
Answered By - Adrid
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.