Как сверстать полупрозрачную обводку на блоке?

Question

Не понимаю как сверстать такой блок.. Интересует конкретно обводка, которая становится прозрачной в некоторых местах. Вот что предлагает фигма: На левый блок с U:

border: 2px solid;
border-image-source: linear-gradient(43.64deg, rgba(248, 40, 71, 0) -1.83%, #F82847 73.21%);

На правый блок:

background: linear-gradient(90deg, rgba(255, 255, 255, 0.19) 9.17%, rgba(255, 255, 255, 0) 74.56%)
border: 1px solid;
border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 74.56%);

Но к сожалению, нужного эффекта нет

Answer 1

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: black;
    height: 100%;
    width: 100%;
}

.block{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 54px;
    margin: 10px 0 0 10px;
    width: 100px;
    height: 100px;    
    border: 10px solid;
    border-image: linear-gradient(120deg, rgba(255,0,0,0.9), rgba(0,0,0,0)) 5;    
    color: white;
}

.block-two{
   
    font-size: 54px;
    margin: 10px 0 0 10px;
    width: 300px;
    height: 100px;    
    border: 10px solid;
    border-image: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(0,0,0,0)) 5;    
    color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="s.css">
    
    <title>Document</title>
</head>
<body>
    
    <div class="block">U</div>

    <div class="block-two"></div>


</body>
</html>

БЛОГ НА HUSL

Как сверстать полупрозрачную обводку на блоке?

Ответы (1 шт):