Is it possible to have a div with a background image which has a skewed bottom AND round corners?
Most examples use only a background color which doesn't have the duplicate image problem that a background image has.
CSS clipping path
The clipping path option works however, it has no support on IE 11.
Closest solution so far
The HTML:
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
The CSS:
.container {
overflow: hidden;
padding-bottom: 40px;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
https://jsfiddle.net/Spindle/81e30bmx/
But the problem with this is that the round corners aren't visible anymore as well...
Adding border-radius to parent div could work, as it will work as border-radius for four corner and then individually using border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius you can change and align accordingly as below and thus it skews at bottom-left along-with border-radius at 4 sides,
.container {
overflow: hidden;
padding-bottom: 40px;
border-top-right-radius:16px;
border-bottom-right-radius:14px;
border-top-left-radius:40px;
margin-top:40px;
display:inline-block;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
It is possible and does seems to work on your example.
If you are talking about the top left and right corners getting chopped off, then what you need to do is add a margin to the top so:
#parallelogram { margin: -41px 0 0 0; }
Would become:
#parallelogram { margin: 23px 0 0 0; }
This will adds the hole shape in.
Related
Here's what I want to achieve:
slanted div:
HTML:
<span class="container">
<span class="element">some dummy text</span>
</span>
CSS:
.container .element {
font-size: 24px;
background-color: gray;
padding: 5px;
position: relative;
}
.container .element:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
}
.container .element:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(0deg, -1deg);
-webkit-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
}
https://jsfiddle.net/mktcany9/
I can't really make it like on the image, even though there is a lot of topics about similar divs.
This might help you.
The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowing parts are hidden with overflow:hidden;.
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
body {
background: #fff;
}
<div>slanted div text</div>
<div>
slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>
I am trying to horizontally center align a inline-block element that also has a fixed position. This is because this element is also being animation via transform translation. Current attempt looks like this:
.cd-nav-trigger {
position: fixed;
display: inline-block;
}
.cd-nav-trigger {
bottom: 7%;
left: 48.25%;
top: auto;
right: auto;
width: 44px;
height: 44px;
z-index: 5;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-overlay-nav, .cd-overlay-content {
/* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
position: fixed;
bottom: 7%;
left: 48.25%;
height: 4px;
width: 4px;
-webkit-transform: translateX(20px) translateY(-20px);
-moz-transform: translateX(20px) translateY(-20px);
-ms-transform: translateX(20px) translateY(-20px);
-o-transform: translateX(20px) translateY(-20px);
transform: translateX(20px) translateY(-20px);
}
HTML implementation is this:
</div> <!-- cd-overlay-content -->
Menu<span class="cd-icon"></span>
</div>
The left property is not allowing me to correctly align the element, even when set to 50%. Any help would be appreciated.
Try to add a negative margin-left (half of the width)
.cd-nav-trigger {
position: fixed;
bottom: 7%;
left: 50%;
width: 44px;
height: 44px;
margin-left: -22px;
}
Menu<span class="cd-icon"></span>
Perspective animation
I was playing around with the css perspective() animation. However, when testing it in Chrome and Opera, I came across some weird behavior.
Chrome and Opera are acting very weird when repeatedly hovering fast over the animation. The animation gets triggered on :hover. Perhaps this is causing the behavior? How can i stop Chrome and Opera having this behavior.
Fiddle
I reproduced the problem within a fiddle. Just do like the red dot is showing.
body {
text-align: center;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 0 auto;
border: 2px solid red;
}
.perspective {
background: blue;
height: 200px;
width: 200px;
transition: transform .33s;
}
.perspective:hover {
transform: perspective( 800px ) rotateY(15deg);
}
.perspective p {
margin: 0;
color: #fff;
text-align: center;
line-height: 200px;
}
.mouse-helper {
position: absolute;
height: 90px;
width: 15px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.mouse-helper .animated {
background: red;
position: absolute;
bottom: 0px;
height: 15px;
width: 15px;
border-radius: 50%;
animation: up-down .29s infinite;
}
#keyframes up-down {
0% {bottom: 0;top: calc(100% - 15px);}
50% {top: 0;bottom: calc(100% - 15px);}
100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
<div style="overflow: hidden;">
<div class="perspective">
<p>TEXT</p>
</div>
</div>
<div class="mouse-helper">
<div class="animated"></div>
</div>
</div>
My guess, but it's only a guess, is that this is related to the response in this issue thread, where some transforms are hardware accelerated and some are not, and that can cause things to get out of sync briefly.
If you explicitly add transform: perspective(0px) rotateY(0deg); to your (non-hovered) .perspective, it doesn't happen:
body {
text-align: center;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 0 auto;
border: 2px solid red;
}
.perspective {
background: blue;
height: 200px;
width: 200px;
transition: transform .33s;
transform: perspective(0px) rotateY(0deg);
}
.perspective:hover {
transform: perspective( 800px ) rotateY(15deg);
}
.perspective p {
margin: 0;
color: #fff;
text-align: center;
line-height: 200px;
}
.mouse-helper {
position: absolute;
height: 90px;
width: 15px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.mouse-helper .animated {
background: red;
position: absolute;
bottom: 0px;
height: 15px;
width: 15px;
border-radius: 50%;
animation: up-down .29s infinite;
}
#keyframes up-down {
0% {bottom: 0;top: calc(100% - 15px);}
50% {top: 0;bottom: calc(100% - 15px);}
100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
<div style="overflow: hidden;">
<div class="perspective">
<p>TEXT</p>
</div>
</div>
<div class="mouse-helper">
<div class="animated"></div>
</div>
</div>
So there's your fix; as to the "why?", once again a guess: The Chromium issue linked above has this from a Chromium dev:
Alternatively we may be able to pull transform animations back to the main thread in this case.
We already do this (at least in M33) for animations where keyframes reference both accelerated and non-accelerated properties:
Maybe the same is now true for transitions (the issue is from 2014), but because the non-hover state does not have any transforms, this logic won't be triggered in your case.
i have this, and i would like to keep the img normal and rotate the div to a parallelogram, which i managed like this
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: 10px;
top: -10px;
}
<div class="parallelogram">
<div class="img">
<img src="https://archive.org/download/AILS-A79-7082/A79-7082.jpg" alt="">
</div>
</div>
My problem is that the img keeps its parent width.
even though i ask it to be 440px its 180px. and i dont understand why.
I tried with vw, and % and none of it works!
Thank you in advance
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color:blue;/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left:-20px;
right:0px;
top:-10px;
background-color:red;/*added for testing*/
opacity: 0.5;/* makes overlap area purple*/
}
<div class="parallelogram">
<div class="img">
<img..../>
</div>
</div>
I made left:-20px; and right:0px; to make the img appear like parallelogram.
I found this Is there are way to make a child DIV's width wider than the parent DIV using CSS? so I wanted to give it try. I hope this helps.
For the image to take the width of the .img div, you also need this rule, since the <img> tag is a child of the div with class .img:
.img img {
width: 100%;
height: auto;
}
(height: auto; is actually not necessary, since it's the default)
ADDITION AFTER COMMENT:
You have to remove overflow: hidden; from the outer DIV:
.parallelogram {
width: 180px;
height: 60px;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color: blue;
/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: -20px;
right: 0px;
top: -10px;
background-color: red;
/*added for testing*/
opacity: 0.5;
/* makes overlap area purple*/
}
.img img {
width: 100%;
height: auto;
}
<div class="parallelogram">
<div class="img">
<img src="http://placehold.it/180x60/#0d0"/>
</div>
</div>
I'm trying to achieve this shape in css, tried in several different ways, checked online for examples but looks like this shape is kind of tricky to accomplish.
Anyone that could have an idea of how to do this? Not sure if it's even possible with css only technique.
Thank you!
Yes, it is possible and it's very simple.
demo
Result:
:
I'm using just one element and a pseudo for the bottom left corner so the HTML is simply:
<div class='shape'></div>
Relevant CSS:
.shape {
overflow: hidden; /* to hide the top right corner
of the parallelogram formed by the pseudo */
position: relative;
width: 20em; height: 10em; /* any values really */
}
.shape:before {
position: absolute;
bottom: 0; left: 0;
width: 150%; height: 150%;
transform-origin: 0 100%;
transform: rotate(-3deg) skewX(-10deg);
background: black;
content: '';
}
You can get a lot of shapes using CSS transforms. And they are real shapes, you can have any kind of background behind.
I think it is perfect solution to your question...
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 5px solid transparent;
padding: 10 8px 5 5;
}
You could also use :before, :after pseudo and transform property. Here's an example.
#box {
width: 400px;
height: 200px;
background-color: #212121;
position: relative;
}
#box:after, #box:before {
display: block;
content: "\0020";
color: transparent;
width: 411px;
height: 45px;
background: white;
position: absolute;
bottom: -20px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#box:before {
bottom: 80px;
left: -200px;
-moz-transform: rotate(92deg);
-webkit-transform: rotate(92deg);
-o-transform: rotate(92deg);
-ms-transform: rotate(92deg);
transform: rotate(92deg);
}
You may have to change some values to get the shape you want.