Радиус границы 50% цвет градиента

Question

Я хочу создать круглую рамку вокруг моего div с градиентным цветом. Как я могу создать это?

Я хочу использовать эту linear-gradient(142deg, #ED586A, #ED844A);

I тока имеют этот HTML;

<div class="col-sm-2"> 
<p class="inner-text"> TITLE </p> 
</div> 

CSS:

.col-sm-2 p {border: 2px solid #e3e3e3; border-radius: 50%; height: 175px; line-height: 175px; width: 175px;} 

JSFIDDLE: https://jsfiddle.net/k8wazLgz/

Answer 1

Вы можете создать эффект путем размещения afterpseudo-element ниже элемента с градиентом фона

Примечание: Для этого требуется сплошной цвет фона, иначе clip-path можно использовать

.col-sm-2 p { 
 
    border: 2px solid #e3e3e3; 
 
    border-radius: 50%; 
 
    height: 175px; 
 
    line-height: 175px; 
 
    width: 175px; 
 
    text-align: center; 
 
    position:relative; 
 
    background:#fff; 
 
} 
 

 
.col-sm-2 p:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:110%; 
 
    height:110%; 
 
    background:linear-gradient(142deg, #ED586A, #ED844A); 
 
    top:-5%; 
 
    left:-5%; 
 
    z-index:-1; 
 
    border-radius:50%; 
 
}

<div class="col-sm-2"> 
 
    <p class="inner-text">TITLE</p> 
 
</div>