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)
}
Related
I need to achieve this block element:
Which can have elements on top/bottom. My problem is to keep the diagonal split always in line in any screen resolution.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: inline-block;
width: 100%;
}
.content {
padding: 50px;
height: 50vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.horizontalbar {
display: flex;
height: 500px;
width: 100%;
position: relative;
}
.horizontalbar img {
position: absolute;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: calc(100% - 5vw);
}
.horizontalbar img.image1 {
left: 0;
top: 5vw;
-webkit-clip-path: polygon(0 0, calc(100% - 25vw) 0%, 25vw 100%, 0% 100%);
clip-path: polygon(0 0, calc(100% - 25vw) 0%, 25vw 100%, 0% 100%);
}
.horizontalbar img.image2 {
right: 0;
top: -5vw;
-webkit-clip-path: polygon(calc(100% - 25vw) 0, 100% 0%, 100% 100%, calc(25vw) 100%);
clip-path: polygon(calc(100% - 25vw) 0, 100% 0%, 100% 100%, calc(25vw) 100%);
}
<div class="content">
<div class="horizontalbar">
<img src="https://source.unsplash.com/900x1300/?women" alt="" class="image1">
<img src="https://source.unsplash.com/900x1400/?man" alt="" class="image2">
</div>
</div>
live codepen
I assume with some js to keep adjusting the clip according to the screensize, but what math/calculations need to be done here? Is there a better way to achieve this?
simplify your clip-path and control the background-position to create the top and bottom spaces:
.box {
display: flex;
height: 400px;
}
.box>div {
flex: 1;
}
.box>div:first-child {
margin-right: -10vw;
background: url(https://picsum.photos/id/1018/800/800) top 50px center /cover no-repeat;
clip-path: polygon(0 0, 100% 0, calc(100% - 20vw - 5px) 100%, 0 100%);
}
.box>div:last-child {
margin-left: -10vw;
background: url(https://picsum.photos/id/125/800/800) bottom 50px center /cover no-repeat;
clip-path: polygon(calc(20vw + 5px) 0, 100% 0, 100% 100%, 0 100%);
}
<div class="box">
<div></div>
<div></div>
</div>
Also like below:
.box {
display: flex;
height: 400px;
}
.box>div {
flex: 1;
position:relative;
}
.box > div::before {
content:"";
position:absolute;
left:0;
right:0;
height:calc(100% - 50px);
background: var(--i) center /cover no-repeat;
}
.box>div:first-child {
margin-right: -10vw;
clip-path: polygon(0 0, 100% 0, calc(100% - 20vw - 5px) 100%, 0 100%);
}
.box>div:first-child::before {
bottom:0;
}
.box>div:last-child {
margin-left: -10vw;
clip-path: polygon(calc(20vw + 5px) 0, 100% 0, 100% 100%, 0 100%);
}
.box>div:last-child::before {
top:0;
}
<div class="box">
<div style="--i:url(https://picsum.photos/id/1018/800/800)"></div>
<div style="--i:url(https://picsum.photos/id/125/800/800)"></div>
</div>
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 made a BG made of CSS clipping in several divs (nested in .background) how do I configure the whole thing to be responsive? When I set width or height to 100% the background does not render at all.
body,
html {
margin: 0px;
}
.bg0 {
position: relative;
width: 1366px;
height: 675px;
background-color: #3B3B3B;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.bg1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333333;
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 0, 80% 0, 35% 50%, 0 12%);
clip-path: polygon(0 0, 80% 0, 35% 50%, 0 12%);
}
.bg2 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #2D2D2D;
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 12%, 0 86%, 35% 50%);
clip-path: polygon(0 12%, 0 86%, 35% 50%);
}
#wrapper {
position: relative;
width: 200px;
height: 200px;
}
.content {
position: relative;
}
.background {
position: absolute;
}
<div id="wrapper">
<div class="background">
<div class="bg0"></div>
<div class="bg1"></div>
<div class="bg2"></div>
</div>
<div class="content">
<h1>Content!!</h1>
</div>
</div>
First....Why are you using fixed width to the bg0 class and also you are giving width to bg0 class grater than its parent element #wrapper...
I don think it's required...Just set the width and height of .background class
Stack Snippet
body,
html {
margin: 0px;
}
.bg0 {
position: relative;
width: 100%;
height: 100%;
background-color: #3B3B3B;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.bg1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333333;
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 0, 80% 0, 35% 50%, 0 12%);
clip-path: polygon(0 0, 80% 0, 35% 50%, 0 12%);
}
.bg2 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #2D2D2D;
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 12%, 0 86%, 35% 50%);
clip-path: polygon(0 12%, 0 86%, 35% 50%);
}
#wrapper {
position: relative;
width: 200px;
height: 200px;
}
.content {
position: relative;
}
.background {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div id="wrapper">
<div class="background">
<div class="bg0"></div>
<div class="bg1"></div>
<div class="bg2"></div>
</div>
<div class="content">
<h1>Content!!</h1>
</div>
</div>
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>
I'm trying to use CSS to make a scalloped border for an image using radial-gradients. Here is what I have so far: JS FIDDLE.
As you can see, the top edge of the image has pointy tips, while the bottom edge is rounded. How can I get the pointy tips at the bottom as well? (Like the bottom edge flipped upside down.)
I would appreciate your help!
HTML:
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
CSS:
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://placekitten.com/1280/120");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: -20px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
Use the same radial-gradient you have on the top, but here you just rotate it 180 degrees
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://www.rhapsodazzle.com/flowers.jpg");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: 0;/*-20px;*/
transform: rotate(180deg); /* added */
left: 0px;
width: 100%;
content:" ";
background: radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
/*
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);*/
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
JSfiddle link: jsfiddle.net/oq2ja51g/3/