5 images symmetrically seperated with diagonal lines
No need to use positioned element, you can simplify like this and use background-position
to center the element:
.container { display: flex; height: 150px; margin: 0 30px;}
.box { flex: 1; border: 1px solid; transform: skew(-25deg); position: relative; overflow: hidden;}
.box:after { content: ""; position: absolute; top: 0; bottom: 0; left: -50%; right: -50%; transform: skew(25deg); background-image: var(--i); background-position: center;}
<div class="container"> <div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div> <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div> <div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div> <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div> <div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div></div>
Two images background inline separate by diagonal border
You can use a clip path
.right { position: absolute; left: 0; top: 0; -webkit-clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%); clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);}
.left { position: absolute; left: 0; top: 0; -webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);}
border { position: absolute; left: 0; top: 0; width: 400px; height: 300px; background-color: black; -webkit-clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%); clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);}
<img class="left" src="https://picsum.photos/400/300?random"><img class="right" src="https://picsum.photos/400/300"><border>
Split a Rectangle View Using the Diagonal in Swift UI
You can create your own Triangle
:
struct Triangle: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.maxX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
return path
}
}
and use it like this:
Rectangle()
.fill(Color.white)
.frame(width: 300, height: 200)
.overlay(
Triangle()
.fill(Color.red)
)
Make multiple oblique-lined images in horizontal div clickable
Like this?
body { margin:0}
.cont { width:80%; height: 70%; display:flex; perspective:1000px; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); display:flex;}
.cont a { display:block; height: 100%; flex:1; background-size:cover; transform: skew(25deg); position: relative; overflow: hidden;}
.cont a::before { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: -50%; right: -50%; transform: skew(-25deg); background-size:cover; background: url("https://picsum.photos/600/700"); position: absolute;}
.cont a:nth-child(2)::before { background: url("https://picsum.photos/600/740");}
.cont a:nth-child(3)::before { background: url("https://picsum.photos/600/720");}
.cont a:nth-child(4)::before { background: url("https://picsum.photos/600/750");}
<div class="cont"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a></div>
How to create a page that's split diagonally and the two halves are clickable links
This can be realized in several ways:
1) on modern browsers in pure CSS using clip-path
Codepen Demo
HTML
<div>
<a href="#1"></a>
<a href="#2"></a>
</div>
CSS
a {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
display: block;
}
a:first-child {
-webkit-clip-path: polygon(0 0, 0 100vh, 100% 100vh);
clip-path: polygon(0 0, 0 100vh, 100% 100vh);
background: #d6d6d6;
}
a:last-child {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100vh);
clip-path: polygon(0 0, 100% 0, 100% 100vh);
background: #212121;
}
2) On less recent browsers, involving only a bit of javascript and 2D Transformation
Codepen Demo
HTML
<div>
<section><a href="#1"></a></section>
<section><a href="#2"></a></section>
</div>
CSS
html, body, div{ height: 100%; width: 100%; padding: 0; margin: 0; }
div { overflow : hidden; position: relative; }
section {
position : absolute;
top : -100%;
height : 500vw;
width : 500vh;
background : #ccc;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
section + section {
background : #333;
top : 0%;
}
section a { display: block; width: 100%; height: 100%; cursor: pointer; }
Js/jQuery:
$(function() {
$(window).on('resize', function() {
var h = $(document).height(),
w = $(document).width();
/* Math.atan() function returns the arctangent (in radians)
* of a number and 1 rad ~= 57.29577 deg
*/
var angle = Math.atan(h/w) * 57.29577;
var rotateProperty = "rotate(" + angle + "deg)";
$('section').css({
"-webkit-transform": rotateProperty,
"-moz-transform": rotateProperty,
"transform": rotateProperty
});
})
.triggerHandler('resize');
});
How do i rotate a CALayer around a diagonal line?
you can fake it this way: create an affine transform that collapse the layer along it's diagonal:
A-----B B
| | /
| | -> A&D
| | /
C-----D C
change the image, and trasform the CALayer back in another animation.
This will create the illusion of the layer rotating around its diagonal.
the matrix for that should be if I remember math correctly:
0.5 0.5 0
0.5 0.5 0
0 0 1
Update:
ok, CA doen't really likes to use degenerate transforms, but you can approximate it this way:
CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, 0.001f, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);
in my tests on the simulator there still was a problem because the rotations happens faster than te translation so with a solid black square the effect was a bit weird. I suppose that if you have a centered sprite with transparent area around it the effect will be close to what expected. You can then tweak the value of the t3 matrix to see if you get a more appealing result.
after more research, it appears that one should animate it's own transition via keyframes to obtaim the maximum control of the transition itself. say you were to display this animation in a second, you should make ten matrix to be shown at each tenth of a second withouot interpolation using kCAAnimationDiscrete; those matrix can be generated via the code below:
CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, animationStepValue, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);
where animationStepValue for ech of the keyFrame is taken from this progression:
{1 0.7 0.5 0.3 0.1 0.3 0.5 0.7 1}
that is: you're generating ten different transformation matrix (actually 9), pushing them as keyframes to be shown at each tenth of a second, and then using the "don't interpolate" parameter. you can tweak the animation number for balancing smoothness and performance*
*sorry for possible errors, this last part was written without a spellchecker.
Related Topics
Why Would Margin Not Be Contained by Parent Element
Flexbox Affects Overflow-Wrap Behavior
Convert a SQL Query Result Table to an HTML Table for Email
Does a Name Attribute Have to Be Unique in a HTML Document
Center Image Element in Parent Div
Stop CSS Transition from Firing on Page Load
Printing HTML Table with Many Columns/Rows Using CSS Layout
Should the HTML Anchor Tag Honor the Disabled Attribute
How to Prevent Text in a Table Cell from Wrapping
Redirect on Select Option in Select Box
How Does Selenium Click on Elements That Are 50% on Screen and 50% Not on Screen
Do Http Post Methods Send Data as a Querystring
Contenteditable=False Inside Contenteditable=True Block Is Still Editable in IE8
What Is the Default Button Type
Difference Between Url Encode and HTML Encode