<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS | shape-image-threshold
</
title
>
<
style
>
.outline {
shape-outside: linear-gradient(20deg,
rgb(77, 26, 103), transparent 80%,
transparent);
/* shape-image-threshold effect */
shape-image-threshold: 0.2;
background-image: linear-gradient(
to top, green, transparent);
width: 300px;
height: 125px;
float: left;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style="color: green">
GeeksforGeeks
</
h1
>
<
b
>
CSS | shape-image-threshold: 0.2;
</
b
>
<
br
><
br
>
</
center
>
<
div
class="outline"></
div
>
<
div
class="container">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles, quizzes and interview questions.
The portal also has dedicated GATE preparation
and competitive programming sections.
<
br
><
br
>
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles, quizzes and interview questions.
The portal also has dedicated GATE preparation
and competitive programming sections.
</
div
>
</
body
>
</
html
>