How do i add a skew box shadow on a div element?
I've tried adding an absolute div behind the div but this doesn't seem to work correctly.
The css i tried is:
.shadow-box-bg {
background-color: rgba(0,0,0,0.8);
width: 150px;
height: 100px;
position: absolute;
z-index: 9;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: scale(2.3) rotate(88deg) translateX(67px) translateY(-17px) skewX(3deg) skewY(-2deg);
}
It seems as though i could have better luck using a div shadow. But i have no idea how to make it skew.
You could use pseudoelements instead of creating empty div for styling purpose only
e.g. http://codepen.io/anon/pen/yNQjgB
Markup
<div class="skewedshadow"></div>
CSS
div {
width: 200px;
height: 400px;
background: #b33049;
}
.skewedshadow {
position: relative;
}
.skewedshadow:before {
position: absolute;
z-index: -1;
content: "";
width: inherit;
height: inherit;
background: rgba(0,0,0, .45);
transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(4deg) skewY(-4deg);
}
Result
Related
Hi there I'm trying to build the current design
I used the skew transform but the whole div skewed not on border
tried using clip-path but I cant use border radius with it
any ideas?
As the outline is just visual rather than having meaning we can add it without adding extra elements in the DOM. We can do this with CSS pseudo elements which paint the border - the top one being skewed, the bottom one not.
Essentially this snippet is using a combination of your two methods - skew and clip-path - to give this:
.container {
background-color: pink;
display: inline-block;
padding: 2vmin;
}
.container>* {
width: 20vmin;
height: 10vmin;
position: relative;
}
.container>*::before,
.container>*::after {
content: '';
top: 0;
left: 0;
border: 1px red solid;
border-radius: 10px;
width: 100%;
height: 100%;
position: absolute;
}
.container>*::before {
transform: skew(0, -5deg);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
}
.container>*::after {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
<div class="container">
<div></div>
</div>
Try having another div as the container of your div, then use the skew transform on that. If that still skews the inner div, you can try having another div that has position: absolute; and position it over your div, then skweing it. It will have to be transparent.
Try this:
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-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;
}
<div>slanted div</div>
And then just reverse it
I have a div with the shape of a hexagon and round corners, now, I would like to place to divs/input fields inside it.
CSS:
.hex {
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: orange;
transition: opacity .5s;
}
.hex:before,
.hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
HTML:
<div class="hex">
// divs or inputs elements here
</div>
if I place something inside in the div it breaks the shape of hexagon.
P.S: if you have seen any login form which has a hexagon shape with round corners please send a link.
You can wrap the inner content in an element and make it absolute and then position it. So that the hexagon shape doesn't break.
.hex {
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: orange;
transition: opacity .5s;
}
.hex:before,
.hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hex span {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="hex">
<span>// divs or inputs elements here</span>
</div>
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>
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.
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.