Skip to content
OverviewSolutions
3
Comments
1

Ronald Arias

@rpariasQuito80 points

Hi, my name is Ronald, I'm programmer and designer. I'm consultant developer at ThoughtWorks, I'm always willing to learn new things and collaborate in projects

Latest solutions

Latest comments

  • Ronald Arias•80
    @rpariasPosted almost 4 years ago

    Hi, in order to round only 2 corners you can use the same property: border-radius: 0 10px 10px 0;

    The first value is the top-left corner, the second is the top-right corner, the third is the bottom-right and the last is the bottom-left.

    To add the magenta layer on top of the image you can use the property mix-blend-mode. Something like this:

    .picture { position: relative; }

    .picture::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; mix-blend-mode: revert; background-color: var(--soft-violet); }

    In addition, you can take a look at this video: https://www.youtube.com/watch?v=mT10ZJdlh9Y

    Marked as helpful
    0