CSS Clip and Shape Module clearly

In this example below you will see how to do a CSS Clip and Shape Module clearly with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Pestov, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Pestov ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Clip and Shape Module clearly</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1>rectange</h1>
  <div class="rectangle"></div>
  "Beware the Jabberwock, my son!
  The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
  The frumious Bandersnatch!"
He took his vorpal sword in hand:
  Long time the manxome foe he sought --
  So rested he by the Tumtum tree,
  And stood awhile in thought.
And, as in uffish thought he stood,
  The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
  And burbled as it came!
  So rested he by the Tumtum tree,
  And stood awhile in thought.
And, as in uffish thought he stood,
  The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
  And burbled as it came!
  <h1>inset-rectange</h1>
  <div class="inset-rectangle"></div>
So rested he by the Tumtum tree,
  And stood awhile in thought.
And, as in uffish thought he stood,
  The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
  And burbled as it came!So rested he by the Tumtum tree,
  And stood awhile in thought.
And, as in uffish thought he stood,
  The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
  And burbled as it came!So rested he by the Tumtum tree,
  And stood awhile in thought.
And, as in uffish thought he stood,
  The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
  And burbled as it came!
    <h1>cirlce</h1>
    <div class="cirlce"></div>
One, two! One, two! And through and through
  The vorpal blade went snicker-snack!
He left it dead, and with its head
  He went galumphing back.
"And, has thou slain the Jabberwock?One, two! One, two! And through and through
  The vorpal blade went snicker-snack!
He left it dead, and with its head
  He went galumphing back.
"And, has thou slain the Jabberwock?One, two! One, two! And through and through
  The vorpal blade went snicker-snack!
He left it dead, and with its head He left it dead, and with its head
  He went galumphing back.
"And, has thou slain the Jabberwock?One, two! One, two! And through and through
  The vorpal blade went snicker-snack!
He left it dead, and with its head   The vorpal blade went snicker-snack!
He left it dead, and with its head
  <h1>ellipse</h1>
    <div class="ellipse"></div>
  Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!'
  He chortled in his joy.
`Twas brillig, and the slithy toves
  Did gyre and gimble in the wabe;
All mimsy were the borogoves,
  And the mome raths outgrabe.  Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!'
  He chortled in his joy.
`Twas brillig, and the slithy toves
  Did gyre and gimble in the wabe;
All mimsy were the borogoves,
  And the mome raths outgrabe.  Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!'
  He chortled in his joy.
`Twas brillig, and the slithy toves
  Did gyre and gimble in the wabe;
All mimsy were the borogoves,
  And the mome raths outgrabe.
 <h1>polygon</h1>
  <p style="font-size: 12px !important;">
    <div class="polygon1"></div>
  <div class="polygon2"></div>
  Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!'
  He chortled in his joy.
`Twas brillig, and the slithy toves
  Did gyre and gimble in the wabe;
All mimsy were the borogoves,
  And the mome raths outgrabe.  Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!'
  He chortled in his joy.
`Twas brillig, and the slithy toves
  Did gyre and gimble in the wabe;
All mimsy were the borogoves,
  And the mome raths outgrabe.  Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!'
  He chortled in his joy.
`Twas brillig, and the slithy toves
  Did gyre and gimble in the wabe;
All mimsy were the borogoves,
  And the mome raths outgrabe. </p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Pestov/css-clip-and-shape-module-clearly-aBAKF */
.rectangle {
  width: 200px;
  height: 100px;
  float: left;
  background: red;
 /* -webkit-transform: rotate(10deg); баг, по origin (обычный rectangle) форма по идее также должна изменять градус наклона */
  -webkit-shape-outside: rectangle(0, 30px, 70%, 50%, 30px, 30px);
  -webkit-clip-path: rectangle(0, 30px, 70%, 50%, 30px, 30px);
  -webkit-shape-margin: 8px;
} 

/* полный бред 
  .rectangle:after {
  position: absolute;
  content: '';
  z-index: 2;
  top: 0;
  left: 0;
  width: 150px;
  -webkit-transform: rotate(-10deg);
  height: 50px;
  background: blue;
} */

.inset-rectangle {
  width: 100px;
  height: 100px;
  float: right;
  background: blue;
  -webkit-shape-outside: inset-rectangle(0, 0, 50%, 50%);
  opacity: 0.3;
}

.cirlce {
  width: 80px;
  height: 80px;
  float: left;
  background: green;
  margin: 0 0 0 -30px; /* багнутый */
  -webkit-shape-outside: circle(50%,50%,50%);
  -webkit-clip-path: circle(50%,50%,50%);
  -webkit-shape-margin: 10px; /* тоже багнутый */
}

.ellipse {
  width: 100px;
  height: 100px;
  float: right;
  background: orange;
  margin: 0 -20px 0 0;
  -webkit-shape-outside: ellipse(50%, 50%, 50%, 20%);
  -webkit-clip-path: ellipse(50%, 50%, 50%, 20%);
  -webkit-shape-margin: 5px;
}
.polygon1 {
  float: left;
  width: 100px;
  height: 200px;
  -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
  background: black;
}
.polygon2 {
  float: right;
  width: 100px;
  height: 200px;
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
   -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: black;
}

.container {
  width: 500px;
  border: 1px solid black;
  padding: 5px;
  font-size: 12px;
  font-family: "source-sans-pro", sans-serif;
  text-align: justify;
  overflow-x: hidden;
  overflow-y: auto;
}

Comments