Transparent lines with CSS

1

Is it possible to do something like this with just CSS?

Thanks

    
asked by anonymous 13.06.2018 / 13:15

1 answer

1

Yes friend there are some ways to do, I particularly prefer using a ::after pseudo element as a radial-gradient

.sombra {
    width: 200px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
.sombra::after {    
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate(0%, -50%);
    background-image: radial-gradient(rgba(0,0,0,0.65) 0%, transparent 70%, transparent 100%);
}
.sombra.scale::after {    
    transform: translate(0%, -50%) scaleY(0.5);
}
<div class="sombra"></div>
<div class="sombra scale"></div>
    
13.06.2018 / 13:47