I have tried so far.
body {
margin:0;
padding:20px;
background-color: #000;
}
.mobil-menu__icon {
height: 50px;
width: 50px;
background:
linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 100%),
linear-gradient(to bottom, transparent 0%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 100%),
linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 80%, #fff 100%);
}
<div class="mobil-menu__icon"></div>
Use only solid color in gradient and rely on background-size:
.mobil-menu__icon {
height: 50px;
width: 50px;
background:
/* position / width height */
linear-gradient(#fff,#fff) top left / 100% 20%,
linear-gradient(#fff,#fff) center left / 80% 20%,
linear-gradient(#fff,#fff) bottom left / 60% 20%,
red;
border:10px solid red;
background-repeat:no-repeat; /* Never forget this! */
}
<div class="mobil-menu__icon"></div>
With hover animation:
.mobil-menu__icon {
height: 50px;
width: 50px;
background:
linear-gradient(#fff,#fff) top left,
linear-gradient(#fff,#fff) center left,
linear-gradient(#fff,#fff) bottom left,
red;
background-size:
100% 20%,
80% 20%,
60% 20%;
border:10px solid red;
background-repeat:no-repeat;
transition:0.3s all;
}
.mobil-menu__icon:hover {
background-size:100% 20%;
}
<div class="mobil-menu__icon"></div>
And if you want with transparency:
.mobil-menu__icon {
height: 50px;
width: 50px;
background:
linear-gradient(red,red) 0 calc(1*100%/4) / 100% 20%,
linear-gradient(red,red) 0 calc(3*100%/4) / 100% 20%,
linear-gradient(red,red) 100% calc(2*100%/4) / 20% 20%,
linear-gradient(red,red) 100% calc(4*100%/4) / 40% 20%;
border:10px solid red;
background-repeat:no-repeat;
}
body {
background:repeating-linear-gradient(to right,white 0 5px,grey 10px);
}
<div class="mobil-menu__icon"></div>
You were also almost good with your code but you were missing the size and the repeat:
body {
margin: 0;
padding: 20px;
background-color: #000;
}
.mobil-menu__icon {
height: 50px;
width: 50px;
background:
linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 100%),
linear-gradient(to bottom, transparent 0%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 100%),
linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 80%, #fff 100%);
background-size:100% 100%,80% 100%, 60% 100%;
background-repeat:no-repeat;
}
<div class="mobil-menu__icon"></div>
Related question to get more details about the different values:
Using percentage values with background-position on a linear gradient
With this code ,the hover effect is working ,the bottom right corner disappears but there is no transition,it's something wrong?
.mydiv:hover{
background-color: blue;
clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
transition: 0.5s ease;
}
You need to add an initial clip-path definition to have a transition between two states:
.box {
background-color: blue;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition: 0.5s ease;
height:150px;
}
.box:hover {
clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
}
<div class="box">
</div>
You can also do the same with background and you will have better support:
.box {
background:
linear-gradient(blue,blue) left,
linear-gradient(to bottom right,blue 49.5%,transparent 50%) right;
background-size:100% 100%,0% 100%;
background-repeat:no-repeat;
transition: 0.5s ease;
height:150px;
}
.box:hover {
background-size:80.1% 100%,20% 100%;
}
<div class="box">
</div>
Transition property need set to class if you want to use it for pseudo class
.mydiv {
background: red;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition: all 0.5s ease;
}
.mydiv:hover {
background: blue;
clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
}
<div class="mydiv">
Hello world
</div>
I am trying to generate a box with ripped paper effect.So far I have tried and have found only this link to code pen which achieves partially what I am trying to do: https://codepen.io/dsm-webdsigner/pen/dYBRYw
What is missing is I need to achieve that paper effect on the all 4 sides of the paper. As far as I understand, it is achieved using clip-path proper and polygon() function of CSS.
-webkit-clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%,0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%,0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%);
Can anyone help me figure out how to achieve those effect on all 4 sides? Thanks in advance.
Well it's only top and bottom because in that example there are only 2 elements used before and after on the .content-box. You need another 2 elements to have left and right 'ripple' effect.
For that, you can add before and after to the parent .content-main. Use the same clip-path so it saves you the trouble but position them differently so the effect looks nice.
It's not the final version, you can add one more wrapper for overflow hidden or you can erase the rotate and position them differently ( but then you have to change the polygon coordonates and i don't think you want that ). But i think it's a very good start for you.
body {
background-color: #eee;
font-family: 'Roboto Slab';
font-weight: 300;
color: #333;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h2 {
font-weight: 400;
font-size: 20px;
margin-bottom: 20px;
}
p {
line-height: 25px;
}
.content-main {
position: relative;
width: 400px;
margin: 40px auto;
}
.content-main:before, .content-main:after {
content: "";
height: 2px;
width: 100%;
top: 0;
position: absolute;
transform: rotate(90deg);
-webkit-clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%);
}
.content-main:before {
background-color: #eee;
left: -50%;
}
.content-main:after {
background-color: #fff;
right: -50%;
}
.content-main .content-box {
height: auto;
overflow: hidden;
padding: 20px;
background: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}
.content-main .content-box:before, .content-main .content-box:after {
content: "";
height: 2px;
position: absolute;
left: 0;
right: 0;
-webkit-clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%);
}
.content-main .content-box:before {
background-color: #eee;
top: 0;
}
.content-main .content-box:after {
background-color: #fff;
bottom: -2px;
}
<div class="content-main">
<div class="content-box">
<h2>Ripped Paper Effect</h2>
<p>Enthusiastically leverage other's effective users via client-centric portals. Energistically promote principle-centered portals vis-a-vis virtual strategic theme areas. Assertively streamline premium alignments through focused total linkage.</p>
</div>
</div>
What about using some background and radial-gradient to have as similar effect:
body {
background-color: #eee;
font-family: 'Roboto Slab';
font-weight: 300;
color: #333;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h2 {
font-weight: 400;
font-size: 20px;
margin-bottom: 20px;
}
p {
line-height: 25px;
}
.content-main {
position: relative;
width: 400px;
margin: 40px auto;
}
.content-main .content-box {
height: auto;
overflow: hidden;
padding: 20px;
background:
radial-gradient(circle at bottom, #fff 85%,transparent 0%)top /20px 20px repeat-x,
radial-gradient(circle at top, #fff 85%,transparent 0%)bottom /20px 20px repeat-x,
radial-gradient(circle at left, #fff 85%,transparent 0%)right /20px 20px repeat-y,
radial-gradient(circle at right, #fff 85%,transparent 0%)left /20px 20px repeat-y,
linear-gradient(#fff,#fff) center/calc(100% - 40px) calc(100% - 40px) no-repeat;
}
<div class="content-main">
<div class="content-box">
<h2>Ripped Paper Effect</h2>
<p>Enthusiastically leverage other's effective users via client-centric portals. Energistically promote principle-centered portals vis-a-vis virtual strategic theme areas. Assertively streamline premium alignments through focused total linkage.</p>
</div>
</div>
As other mentioned they're using the same clip path on the pseudo-elements on that div, however we can get rid of those and have our clip-path that clips the div it self.
body {
background-color: #eee;
font-family: 'Roboto Slab';
font-weight: 300;
color: #333;
text-rendering: optimizeLegibility;
}
h2 {
font-weight: 400;
font-size: 20px;
margin-bottom: 20px;
}
p {
line-height: 25px;
}
.content-main {
position: relative;
width: 400px;
margin: 40px auto;
}
.content-main .content-box {
height: auto;
overflow: hidden;
padding: 20px;
background: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
-webkit-clip-path: polygon(0% 0%, 5% 2%, 10% 0%, 15% 2%, 20% 0%, 25% 2%, 30% 0%, 35% 2%, 40% 0%, 45% 2%, 50% 0%, 55% 2%, 60% 0%, 65% 2%, 70% 0%, 75% 2%, 80% 0%, 85% 2%, 90% 0%, 95% 2%, 100% 0%, 98% 5%, 100% 10%, 98% 15%, 100% 20%, 98% 25%, 100% 30%, 98% 35%, 100% 40%, 98% 45%, 100% 50%, 98% 55%, 100% 60%, 98% 65%, 100% 70%, 98% 75%, 100% 80%, 98% 85%, 100% 90%, 98% 95%, 100% 100%, 95% 98%, 90% 100%, 85% 98%, 80% 100%, 75% 98%, 70% 100%, 65% 98%, 60% 100%, 55% 98%, 50% 100%, 45% 98%, 40% 100%, 35% 98%, 30% 100%, 25% 98%, 20% 100%, 15% 98%, 10% 100%, 5% 98%, 0% 100%, 2% 95%, 0% 90%, 2% 85%, 0% 80%, 2% 75%, 0% 70%, 2% 65%, 0% 60%, 2% 55%, 0% 50%, 2% 45%, 0% 40%, 2% 35%, 0% 30%, 2% 25%, 0% 20%, 2% 15%, 0% 10%, 2% 5%);
}
<div class="content-main">
<div class="content-box">
<h2>Ripped Paper Effect</h2>
<p>Enthusiastically leverage other's effective users via client-centric portals. Energistically promote principle-centered portals vis-a-vis virtual strategic theme areas. Assertively streamline premium alignments through focused total linkage.</p>
</div>
</div>
I am trying to apply clip-path on three items which are aligned next to each other. Since paths are calculating the space between each other based on the non-clipped div shape, there is an unwanted gap. In the code below when I apply the commented styles in .class2 I get a close result of what I want, but then it's no longer responsive. Any other way to get the similar result with a more suitable approach ?
https://codepen.io/SpoyrazY/pen/erbKXx
HTML
<div class="class1">
<h1>1</h1>
</div>
<div class="class2">
<h1>2</h1>
</div>
<div class="class3">
<h1>3</h1>
</div>
CSS
.class1{
background-image:url(https://dummyimage.com/600x400/66ccff/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
text-align: center;
color: white;
}
.class2{
background-image:url(https://dummyimage.com/600x400/66ff66/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0%, 100%);
clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
/*
margin-left: -90px;
margin-right: -90px;
width: 42.7%;
-webkit-clip-path: polygon(12% 0, 100% 0%, 85% 100%, 0%, 100%);
clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
*/
text-align: center;
color: white;
}
.class3{
background-image:url(https://dummyimage.com/600x400/ff99ff/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
text-align: center;
color: white;
}
This happens due to clip-path. you can achieve your result by setting scale in a custom class. so your html will be like this
<div class="class1 block">
<h1>1</h1>
</div>
<div class="class2 block">
<h1>2</h1>
</div>
<div class="class3 block">
<h1>3</h1>
</div>
Add some lines of css
.block {
transform: scale(1.35);
transform-origin: top;
}
working fiddle here