I was wondering if it was possible to split a screen into 2 parts diagonally as shown on the picture. Once I'd hover over Picture A, the diagonal line would shift a bit to the right, revealing more of picture A while hiding a bit of picture B (I'm thinking transition?), and when I'd hover over picture B the opposite would happen.
Thanks in advance,
Martin
The diagonal image transition effect is unique request. I tried my best, Can you please check revealing effect.
section {
border: 1px solid black;
display: flex;
width: 400px;
box-sizing: border-box;
}
.diagonalHover {
position: absolute;
width: 66%;
height: 200px;
transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.second:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
.diagonalHover.second {
right: 0;
top: 0;
-webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}
<section>
<div class="diagonalHover first">
</div>
<div class="diagonalHover second">
</div>
</section>
Related
I have been trying to make a custom shape with a border and transparent background.
The initial approach, i tried was with transfrom skew but that couldn't give me the shape i was after.
I have also been experimenting with clip paths, my first attempt i managed to control the angle based off the height and also the right padding, which is a benefit. I would prefer to use this for that reason but unfortunately putting border on it doesn't work.
I found a bit online about having a shape inside a shape but then i cant have a clear background but its the shape i'm after.
If any one knows how i can create this shape either amending the code i tried using or a different approach i haven't thought about that would be great.
For visual reference this is what i'm trying to achieve.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--cta-height: 60px;
--cta-angle: calc(var(--cta-height) - 20px);
--cta-side-padding: 40px;
--cta-height-inner: calc(var(--cta-height) - 4px);
--cta-angle-inner: calc(var(--cta-height-inner) - 20px);
}
.img1 {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
}
.bk-image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 50px;
}
/* attemp one with angle and right padding based off of the height */
.cta {
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
display: flex;
align-items: center;
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding);
margin-bottom: 50px;
}
.cta__ora {
border: 2px solid orange;
color: #ffffff;
}
.flex-p {
display: flex;
align-content: center;
}
/* attemp two */
.outside {
position: relative;
background: tomato;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding)
}
.inside {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: white;
clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="bk-image img1 ">
<div class="flex-p">
<a class="cta cta__ora">clip path angle adjust from the height</a>
</div>
<div class="outside">
<div class="inside">
hello
</div>
</div>
</div>
</body>
</html>
You can work a little bit with ::after and position like a slash
body {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg") no-repeat;
}
.inside {
height: 50px;
width: 300px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
position: relative;
clip-path: polygon(0 0, 100% 0%, 89% 100%, 0% 100%);
}
.inside::after {
content: "";
position: absolute;
height: 65px;
width: 300px;
top: -2px;
right: -1.5px;
border-right: 2px solid black;
transform: rotate(31.8deg);
transform-origin: right top;
}
<div class="inside">
Find out more
</div>
This question already has answers here:
How can I create Triangle shape clip mask using CSS
(4 answers)
Transparent arrow/triangle indented over an image
(4 answers)
Closed 4 years ago.
I want the image to fill the whole space in the div, including the area of the arrow on the div's right side. I didn't find any tip or sample to solve the problem. Can you please help me?
.arrow_box {
position: relative;
background: #88b7d5;
width: 400px;
height: 200px;
}
.arrow_box:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 15px;
margin-top: -15px;
z-index: -30;
}
.user-image{
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
background-position: center center;
position: relative;
object-fit: cover;
z-index: 10;
}
<div class="arrow_box">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" />
</div>
You can do it with the clip-path: polygon():
.arrow_box {
position: relative;
background: #88b7d5;
width: 400px;
height: 200px;
-webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}
.user-image {
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
background-position: center center;
position: relative;
object-fit: cover;
z-index: 10;
-webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}
<div class="arrow_box">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" alt="">
</div>
I am creating trapezoid using following CSS:
.trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
The linear-gradient attribute is not working. I want the trapezoid as shadow i.e its color should eventually fade away. Can anyone please help me on this?
Or use a transform on a suitably sized element (or pseudo-element).
.trapezoid {
width: 100px;
height: 100px;
margin: auto;
transform: perspective(100px) rotateX(40deg);
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
You cannot apply gradient in this way as you are using border and your element has a height of 0 so background won't be visible.
Instead you can try to use multiple gradient to create the shape:
.trapezoid {
height: 100px;
width: 200px;
background:
linear-gradient(to bottom left,white 50%,transparent 52%) 100% 0/40px 100% no-repeat,
linear-gradient(to bottom right,white 50%,transparent 52%) 0 0/40px 100% no-repeat,
linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
Or use clip-path:
.trapezoid {
height: 100px;
width: 200px;
background: linear-gradient(red, yellow);
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
<div class='trapezoid'></div>
Another method with skew and pseudo-element:
.trapezoid {
height: 100px;
width: 200px;
position: relative;
}
.trapezoid:before,
.trapezoid:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 60%;
background: linear-gradient(red, yellow);
transform:skew(20deg);
transform-origin:bottom right;
}
.trapezoid:after {
left: 0;
transform:skew(-20deg);
transform-origin:bottom left;
}
<div class='trapezoid'></div>
I'm trying to create a border to my clip path using pseudo-elements. I have already tried to change positioning in them and my pseudoelement still stay on top of it. How can I change this?
You can see my code in here.
#shield {
z-index: 1;
background-color: red;
box-shadow: 1px 1px 1px black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
display: inline-block;
height: 120px;
width: 200px;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
#logo {
width: 100px;
height: 100px;
}
#shield::before {
top: 0;
left: 0;
transform: scale(1.2);
content:"";
display: block;
width: 100%;
height: 100%;
background-color: black;
position: absolute;
z-index: -1;
}
<div class="navbar-brand navbar-brand-centered" id="shield">
</div>
To see what I wanted to be in top of things, just delete the ::before element
Full example is in here
Thanks in advance :)
Just flip it around. Use your background image in your ::after and your black color for the actual div.
#shield {
z-index: 1;
background-color: black;
box-shadow: 1px 1px 1px black;
position: relative;
display: inline-block;
height: 120px;
width: 200px;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
#logo {
width: 100px;
height: 100px;
}
#shield::before {
top: 0;
left: 0;
transform: scale(1.2);
content:"";
display: block;
width: 100%;
height: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
position: absolute;
z-index: 1;
background-size: 50%;
}
<div id="shield"></div>
i want create Transversely div using css.
i want create look like show in following image.
following image
You can use:
transform: skew();
in your CSS.
Working Example:
body {
margin: 0;
}
.intro {
position: relative;
width: 65vw;
height: 100vh;
left: -15vw;
background-color: rgb(47, 47, 47);
transform: skew(-10deg);
}
<div class="intro">
</div>
something like this?
this is a quick copy/paste that i found on a site i made..
https://codepen.io/biroplane/pen/NpLrvE
#sx {
-webkit-clip-path: polygon(0 0, 95% 0, 74% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 84% 100%, 0% 100%);
background-image: url('https://unsplash.it/1920/1080/?random');
//background-image: url('http://loremflickr.com/1920/1080/dog,cat');
background-position: center center;
background-clip: border-box;
background-repeat: no-repeat;
background-size: cover !important;
background-attachment: scroll;
overflow: scroll;
width: 50vw !important;
height: 100vh;
display: flex;
align-items: center;
align-content: center;
flex-direction: column;
transition: all 0.5s cubic-bezier(.34, -0.32, .42, 1.34);
&:hover {
border: 10px solid white;
width: 100vw !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
~ #dx {
//width:100vw !important;
}
h1 {
//margin-left: 25vw;
color: white;
#include textlongshadow(#222);
}
img {
//margin-left: 25vw;
#include longshadow();
//-webkit-filter:drop-shadow(10px 10px 10px white) drop-shadow(20px 20px 10px red);
//longdrop(20,#222);
}
}