CODEWITHSUNDEEP
css
Peter Steenbergen
Peter Steenbergen

Reputation: 125

CSS transparant top right triangle border

I have a block(div) with a lineair gradient. Is it possible to make the top right corner to cut out a triangle?

You have border-radius 5px for instance to make a block with round corners. But is it possible to have a transparant top right corner of 40px?

Thanks for reading

Upvotes: 0

Views: 322

Answers (2)

Nick Bloks
Nick Bloks

Reputation: 9

You can achieve the effect with ::after / :: before elements like this.

.yourelement{
    position:relative; // Required.
}
.yourelement::after {
    content: "";
    position: absolute;
    border-left: 40px solid transparent; 
    border-top: 40px solid #fff; // YOUR BG COLOR
    top: 0px;
    right:0px
}

You can base the px sizes on the size of your element as you please, also adjust the colors etc.

this essentially places a triangle over your corner to make it appear cut.

Upvotes: 0

Peter Steenbergen
Peter Steenbergen

Reputation: 125

Sorry it is like this: https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-top-right-radius&preval=100px

Only not rounded but a sharp corner like a triangle. (Straight line)

<div class="top-block">content</div>

.top-block {
    background: lineair-gradient(from top to right, red, blue);
    border-top-right-radius: 100px;
}

Upvotes: 0

Related Questions