I need a suggestion for creating an Image with clip path. This image looks like slightly low height in right corner side. Actually I done this by using clip path but while applying border style I got the issue with border radius in right corner. can anyone please give some suggestion.
html {
padding: 0;
}
body {
margin: auto;
padding: 0;
width: 80%;
}
div {
position: relative;
overflow: hidden;
}
.wholediv img {
clip-path: polygon(5% 5%, 95% 10%, 95% 93%, 5% 93%);
}
.wholediv {
display: block;
width: 38%;
clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%);
border-radius: 16px;
background-color: blueviolet;
}
<div class="wholediv">
<img src="http://www.nasa.gov/images/content/531265main_iss027e007014_1600_800-600.jpg" alt="" width="100%" />
</div>
You can try border-top-right-radius with two values for this corner. Top indent use %, right indent px:
html {
padding: 0;
}
body {
margin: auto;
padding: 0;
width: 80%;
}
div {
position: relative;
overflow: hidden;
}
.wholediv img {
clip-path: polygon(5% 5%, 95% 10%, 95% 93%, 5% 93%);
}
.wholediv {
display: block;
width: 38%;
clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%);
border-radius: 16px;
border-top-right-radius: 25% 16px;
background-color: blueviolet;
}
<div class="wholediv">
<img src="http://www.nasa.gov/images/content/531265main_iss027e007014_1600_800-600.jpg" alt="" width="100%" />
</div>
Related
I am trying to give a div 4 cutoff corners
Like this
This is what I have done so far
But the problem with clip-path is that I can't get the background image present(in the body tag)enter image description here, I have to add the background image again in the innerWrap which does not look consistent.
is there any way to achieve the cut-off corner and without loosing the background image present in the body
.heroWrapper {
display: flex;
align-content: center;
justify-content: center;
padding: 0.06rem;
height: 100%;
background-color: v.$secondary;
clip-path: polygon(
0 0%,
10% 0,
90% 0,
100% 10%,
100% 90%,
90% 100%,
10% 100%,
0% 90%,
0% 10%
);
.heroInnerWrap {
width: 100%;
height: 100%;
margin: auto;
background: url("../bgImage.png");
background-size: contain;
clip-path: polygon(
0 0%,
10% 0,
90% 0,
100% 10%,
100% 90%,
90% 100%,
10% 100%,
0% 90%,
0% 10%
);
.borders {
position: absolute;
width: 15rem;
height: 15rem;
background: v.$primary;
}
}
.topright {
top: 0rem;
right: 0rem;
transform: rotate(45deg);
}
}
Just create a type of hexagon and mask it with it.
.hexagon {
top: 30vh;
left: 40%;
position: absolute;
margin: 0 auto;
background-color: blue;
border-radius: 10px;
width: 100px;
height: 63px;
box-sizing: border-box;
transition: all 1s;
border: 0.4vh solid transparent;
}
/* Creating pseudo-class */
.hexagon:before, .hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -0.5vh;
left: -0.5vh;
background-color: dodgerblue;
border-radius: inherit;
height: 100%;
width: 100%;
}
/* Align them in such a way
that they form a hexagon */
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
<!DOCTYPE html>
<html>
<head>
<title>
Draw a Curved Edge
Hexagon using CSS
</title>
<style>
</style>
</head>
<body style="text-align: center;">
<!-- Hexagon Division -->
<div class="hexagon"
id="hexagon">
</div>
</body>
</html>
How can I make a div with diagonal bottom and with border?
I know that I can use clip-path, but by this way I can't make a border (example: https://jsfiddle.net/s976/qopxf6mj/4/)
I saw "Creating a diagonal line/section/border with CSS" but it's not about enabling css border for diagonal container.
You can try the use of skew transformation like below:
.container {
width: 300px;
height: 200px;
background: url(https://picsum.photos/id/1002/800/800) center/cover;
overflow: hidden;
}
.box {
height: 70%;
border-bottom: 10px solid red;
transform: skewY(-15deg);
transform-origin: left;
position: relative;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://picsum.photos/id/12/800/800) center/cover;
transform: skewY(15deg);
transform-origin: left;
}
<div class="container">
<div class="box">
</div>
</div>
Or clip-path combined with some gradient like below:
.container {
width: 300px;
height: 200px;
background: url(https://picsum.photos/id/1002/800/800) center/cover;
}
.box {
height: 70%;
border-bottom: 10px solid red;
background:
linear-gradient(to bottom right,transparent 49.5%,red 50%) bottom/100% 80px no-repeat,
url(https://picsum.photos/id/12/800/800) center/cover;
clip-path:polygon(0 0,100% 0, 100% calc(100% - 80px),0 100%)
}
<div class="container">
<div class="box">
</div>
</div>
You can optimze the last code to use only one element and some variables
.container {
width: 300px;
height: 200px;
background: url(https://picsum.photos/id/1002/800/800) center/cover;
--angle:80px; /* Control the angle*/
--thickness:10px; /* Control the thickness of the line */
}
.container:before{
content:"";
display:block;
height: 70%;
border-bottom: var(--thickness) solid red;
background:
linear-gradient(to bottom right,transparent 49.2%,red 50%) bottom/100% var(--angle) no-repeat,
url(https://picsum.photos/id/12/800/800) center/cover;
clip-path:polygon(0 0,100% 0, 100% calc(100% - var(--angle)),0 100%)
}
<div class="container">
</div>
<div class="container" style="--angle:40px;--thickness:5px">
</div>
You can use the clip-path property and manipulate its size.
Try This:-
.right {
position: absolute;
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 23%, 0 83%);
clip-path: polygon(0 0, 100% 0%, 100% 23%, 0 83%);
}
.left {
position: absolute;
left: 0;
top: 0;
-webkit-clip-path: polygon(0 75%, 100% 22%, 100% 100%, 0 100%);
clip-path: polygon(0 75%, 100% 22%, 100% 100%, 0 100%);
}
border {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 300px;
background-color: black;
-webkit-clip-path:polygon(0 75%, 100% 22%, 100% 28%, 0 83%);
clip-path: polygon(0 75%, 100% 22%, 100% 28%, 0 83%);
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<img class="left" src="https://picsum.photos/400/300?random">
<img class="right" src="https://picsum.photos/400/300">
<border />
</body>
</html>
Well i have an idea for you you can do it with skewY:
<div class="div1"><div class="content"></div></div>
<div class="div2"><div class="content"></div></div>
div1 {
transform: skewY(-10deg)
}
div2 {
transform: skewY(-10deg)
}
After that your content will be also skewed with -10 deg so you need to skew it the other way around:
.content {
transform: skewY(10deg)
}
I am trying to create a "perspective mockup" using CSS. There are a fair amount of tutorials on how to achieve this with 3D layers in Photoshop, but I would like to do it with CSS. Here is an example of what I am trying to achieve:
And here is the code (using the raw image, https://i.imgur.com/foDEYpB.png):
#perspective {
width: 400px;
height: 500px;
position: absolute;
background-image: url("https://i.imgur.com/foDEYpB.png");
background-repeat: no-repeat;
background-size: cover;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -250px;
transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
box-shadow: -15px 15px 20px rgba(0, 0, 0, 0.5);
}
<div id='perspective'></div>
I am pretty close, but am unsure how to achieve the "depth" or "height" where the image looks raised. Zoomed in version of said "depth" where the image is repeated onto the sides:
P.S. if anyone knows the correct name for what I'm referring to as "depth", I'd love to know!
Try adding three type of images to make 3D effects. Use transform property with rotation for images to get the desired result.
Answer reference here.
.perspective {
position: relative;
width: 400px;
height: 500px;
transform-style: preserve-3d;
transition: all 500ms ease-in;
transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
transform: rotateY(15deg) rotateX(50deg) rotateZ(-15deg);
box-shadow: -40px 80px 80px -10px rgba(0, 0, 0, 0.7);
cursor: pointer;
margin-right: 30px;
display: inline-block;
margin-left: 30%;
}
.perspective img {
position: absolute;
top: 0px;
left: 0px;
width: 400px;
height: 500px;
transform: translateZ(16px);
}
.bottom,
.left {
position: absolute;
width: 400px;
height: 500px;
display: block;
transition: all 1s linear;
overflow: hidden;
border-radius: 3px;
transform: translateZ(16px);
filter: brightness(80%)
}
.left {
transform: rotateY(270deg) translateX(-1px);
transform-origin: center left;
width: 18px;
}
.bottom {
transform: rotateX(90deg) translateY(15px) translateZ(-480px);
transform-origin: bottom center;
height: 18px;
}
.bottom img {
transform: rotateX(180deg);
width: 100%;
height: 500px;
left: 0px;
}
<div class="perspective">
<img src="https://i.imgur.com/foDEYpB.png">
<div class="bottom"><img src="https://i.imgur.com/foDEYpB.png"></div>
<div class="left"><img src="https://i.imgur.com/foDEYpB.png"></div>
</div>
Here is a hacky idea using multiple background to simulate such effect. The trick is to add 2 semi-transparent gradients to create the shadow effect then 2 other gradient to cut a small part of the corner to obtain the 3D shape.
The result may not be perfect for all the images:
.wrapper {
display:inline-block;
perspective:1000px;
}
.box {
margin: 50px;
width:200px;
height:200px;
transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
background:
linear-gradient(to bottom right,transparent 49%,#fff 52%) bottom right/14px 10px,
linear-gradient(to top left,transparent 49%,#fff 52%) top left /10px 14px,
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 0 0px/10px 100%,
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 100% 100%/calc(100% - 10px) 10px,
url(https://picsum.photos/id/1061/1000/800) center/cover;
background-repeat:no-repeat;
}
<div class="wrapper" >
<div class="box" >
</div>
</div>
With your image you can have a specific gradient like below:
body {
background:#ccc;
}
.wrapper {
display:inline-block;
perspective:1000px;
}
.box {
margin: 50px;
width:200px;
height:250px;
transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
background:
linear-gradient(to bottom right,transparent 49%,#ccc 52%) bottom right/16px 10px,
linear-gradient(to top left,transparent 49%,#ccc 52%) top left /10px 12px,
linear-gradient(#efefef,#efefef) 100% 100%/calc(100% - 10px) 10px,
linear-gradient(-226deg,#222428 13px,#ff4946 13px,#ff4946 77px,#592D30 77px,#592D30 100px,#222428 100px,#222428 108px,#efefef 108px,#efefef 161px) 0 0px/10px 100%,
url(https://i.imgur.com/foDEYpB.png) center/cover;
background-repeat:no-repeat;
}
<div class="wrapper">
<div class="box">
</div>
</div>
I want to cut left top corner of a box using CSS like this.
keep in mind that background is transparent.
Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner).
This gradient will look the same regardless of .card width and height.
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(135deg, transparent 20px, white 20px);
}
<div class="card"></div>
You can use a simple linear gradient for that:
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom right, transparent 5%, white 5%);
}
<div class="card"></div>
You can use clip-path
https://developer.mozilla.org/en/docs/Web/CSS/clip-path
and use something like this:
div#test{
background:red;
width:200px;
height: 200px;
-webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}
<div id="test"></div>
With a pseudo and transform you can do that, and it has good browser support (from IE9)
body {
background: url(https://picsum.photos/400/300) center / cover;
}
div {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
left: calc(50% + 25px); /* 25px is height/width of the cut */
top: calc(50% + 25px);
width: 141.5%;
height: 141.5%;
transform: translate(-50%,-50%) rotate(45deg);
background: #eee;
opacity: 0.8;
}
<div></div>
As pointed out, if you need it to scale on different aspect ratio's, use this
body {
background: url(https://picsum.photos/400/300) center / cover;
}
div {
position: relative;
width: 80vw;
height: 80vh;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1000%;
height: 5000%;
transform: rotate(45deg) translate(25px,-50%); /* 25px for the cut height/width */
transform-origin: left top;
background: #eee;
opacity: 0.8;
}
<div></div>
I am trying to achieve this effect in CSS:
This is my code:
#test {position: relative;margin: 100px;}
#test::after {
background-color: maroon;
box-shadow: 0 -50px 10px 7px gray;
height: 45px;
left: -15px;
position: absolute;
top: 40px;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center bottom 0;
width: 60px;
content: "";
}
<div id="test"></div>
but I am not achieving the expected result with the cast shadow. I wonder if its even possible to do this with CSS only?
Fiddle Demo
Maybe something like this? I added another element representing the shadow:
#shadow {
height: 90px;
left: -15px;
position: absolute;
top: 30px;
background: rgba(0, 0, 0, 0);
width: 60px;
transform: perspective(50px) rotateX(25deg);
box-shadow: 0 -106px 20px 17px #808080;
}
https://jsfiddle.net/zcyy09mp/4/
As mentioned in my comment, I would generally recommend the approach used in my fiddle (which is, use another pseudo-element) or the one in Martin's answer (which is, to use an extra element) but as you've mentioned that the other pseudo-element is already used and you are trying to avoid any extra elements, the other approach is to use gradients as background for the parent element. By using the appropriate side-to-side gradients with background-position, background-size, we can not only get the shape but also an effect very similar to the blurred nature of the shadow.
Below is a sample snippet: (the output is also reasonably responsive as you can see by hovering it)
#test {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
background: linear-gradient(to bottom right, transparent 45%, gray 55%), linear-gradient(to bottom left, transparent 45%, gray 55%), linear-gradient(to bottom, transparent, gray), linear-gradient(gray, gray);
background-repeat: no-repeat;
background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}
#test::after {
position: absolute;
content: "";
background-color: maroon;
width: 100%;
height: 45%;
left: 0px;
top: 100%;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center top 0;
}
/* just for demo */
#test {
transition: all 1s;
}
#test:hover {
height: 200px;
width: 200px;
}
<div id="test"></div>
In the below snippet, I have given a different color for each of the gradient just to visually show how it is achieved.
#test {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
background: linear-gradient(to bottom right, transparent 45%, red 55%), linear-gradient(to bottom left, transparent 45%, blue 55%), linear-gradient(to bottom, transparent, green), linear-gradient(rebeccapurple, rebeccapurple);
background-repeat: no-repeat;
background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}
#test::after {
position: absolute;
content: "";
background-color: maroon;
width: 100%;
height: 45%;
left: 0px;
top: 100%;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center top 0;
}
/* just for demo */
#test {
transition: all 1s;
}
#test:hover {
height: 200px;
width: 200px;
}
<div id="test"></div>
According to the W3 spec, "the 'box-shadow' property attaches one or more drop-shadows to the box". The shadow you want to create is not a drop shadow so there is no CSS that would make the shadow in the picture.
The closest you could achieve is pushing the shadow off one edge by using a negative spread radius:
body {
padding-top: 50px;
}
#test {
margin: 0 auto;
background-color: maroon;
box-shadow: 0 -20px 7px -6px black;
height: 45px;
width: 60px;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center bottom 0;
}
<div id="test"></div>