Skew Background Image on one side with a border
The trick is to correctly set the transform-orgin, the border and then it should be easy to apply both skew transformation. You may also need some negative margin to rectify some spaces.
I used CSS variables to make the code easy but it's not mandatory.
#about-gallery {
margin: 60px 0;
display: flex;
flex-wrap: wrap;
--s:-8deg; /* The skew factor (the same for all)*/
}
.about-img-wrapper {
margin: 5px;
overflow: hidden; /* Don't forget this !!*/
flex-grow:1;
}
.about-img-wrapper > * {
height: 300px;
background: center/cover no-repeat;
overflow: hidden; /* Don't forget this !!*/
transform:skewX(var(--s,0deg));
}
/* We need skewY for the 3 last element */
.about-img-wrapper:nth-child(n + 3) > * {
transform:skewY(var(--s,0deg));
}
/* The pseudo element will get the image and the inverse of skewing */
.about-img-wrapper > *::before {
content:"";
display:block;
height:100%;
background:inherit; /* inherit the image */
transform-origin: inherit; /* inherit the same transform-origin */
transform:skewX(calc(-1*var(--s,0deg)));
}
.about-img-wrapper:nth-child(n + 3) > *::before {
transform:skewY(calc(-1*var(--s,0deg)));
}
/**/
.image-1 {
border-left: solid 10px black;
flex-basis:50%;
margin-right:-15px;
}
.image-1>* {
transform-origin: top;
border: solid 10px black;border-left: none;
}
/**/
.image-2 {
border-right: solid 10px black;
flex-basis:40%;
margin-left:-15px;
}
.image-2>* {
transform-origin: bottom;
border: solid 10px black;border-right: none;
}
/**/
.image-3 {
border-top: solid 10px black;
flex-basis:100%;
}
.image-3>* {
transform-origin: left;
border: solid 10px black;border-top: none;
}
/**/
.image-4,
.image-5{
border-bottom: solid 10px black;
flex-basis:40%;
margin-top:-5vw;
}
.image-4>*,
.image-5>* {
transform-origin: right;
border: solid 10px black;border-bottom: none;
}
.image-5 {
margin-top:-12vw;
}
.image-5>* {
height:calc(300px + 7vw); /* We need a bigger height here */
}
/**/
* {
box-sizing: border-box;
}<div id="about-gallery">
<div class="about-img-wrapper image-1">
<div style="background-image: url(https://picsum.photos/id/10/800/800);"></div>
</div>
<div class="about-img-wrapper image-2">
<div style="background-image: url(https://picsum.photos/id/102/800/800);"></div>
</div>
<div class="about-img-wrapper image-3">
<div style="background-image: url(https://picsum.photos/id/123/800/800);"></div>
</div>
<div class="about-img-wrapper image-4">
<div style="background-image: url(https://picsum.photos/id/14/800/800);"></div>
</div>
<div class="about-img-wrapper image-5">
<div style="background-image: url(https://picsum.photos/id/20/800/800);"></div>
</div>
</div>Skew one side of image while keeping border-radius
You need something like this.
div {
width: 300px;
height: 200px;
margin: 10px 90px;
border-radius: 30px;
overflow: hidden;
-webkit-transform: perspective(300px) rotateX(-19deg);
-o-transform: perspective(300px) rotateX(-30deg);
-moz-transform: perspective(300px) rotateX(-30deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="https://static.scientificamerican.com/sciam/cache/file/4E0744CD-793A-4EF8-B550B54F7F2C4406_source.jpg">
</div>
</body>
</html>CSS3 Transform Skew One Side
Try this:
To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg.
.container {
overflow: hidden;
}
#parallelogram {
width: 150px;
height: 100px;
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
overflow: hidden;
position: relative;
}
.image {
background: url(http://placekitten.com/301/301);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>Skew div border of one side only using one div only
I believe this is what you want:
http://jsfiddle.net/5a7rhh0L/3/
CSS:
#a {
position: relative;
width: 120px;
padding: 10px 20px;
font-size: 20px;
position: relative;
color: #2E8DEF;
background: #333333;
border-bottom: 3px solid #2E8DEF;
}
#a:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #333333;
border-bottom: 3px solid #2E8DEF;
border-right: 20px solid #2E8DEF;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
Skew only one side of before & after to get flat-arrow
You can adjust the transform-origin then hide the overflowing part of the skewed element and change the left border of the first child on hover:
body {
margin: 0;
}
.breadcrumbs {
background-color: white;
width: 100%;
padding: 0 1rem;
font-size: 0;
margin: 1rem;
}
.breadcrumbs .breadcrumb-step {
display: inline-block;
width: 12.33%;
height: 5rem;
text-decoration: none;
color: black;
}
/*added this*/
.breadcrumbs .breadcrumb-step:first-child {
width: 15.33%;
overflow:hidden;
border-left:1px solid lightgrey;
}
/**/
.step-title {
display: none;
}
.breadcrumb-step:before,
.breadcrumb-step:after {
content: '';
display: block;
height: 50%;
box-sizing:border-box;
width: 100%;
border: 1px solid lightgrey;
}
.breadcrumb-step:before {
transform: skew(30deg);
transform-origin:right bottom; /*added this*/
border-bottom: none;
}
.breadcrumb-step:after {
transform: skew(-30deg);
transform-origin:right top; /*added this*/
border-top: none;
}
/*added this*/
.breadcrumb-step:hover:before,
.breadcrumb-step:hover:after,
.breadcrumbs .breadcrumb-step:first-child:hover{
border-color: black;
}<div class="breadcrumbs">
<a class="breadcrumb-step" href="#"><span class="step-title">Home</span></a>
<a class="breadcrumb-step" href="#"><span class="step-title">About</span></a>
<a class="breadcrumb-step" href="#"><span class="step-title">Contact Us</span></a>
</div>Side by side skewed divs
The width of the floated, skewed elements is the same as the original width. I added a container within the section, set overflow:hidden; on the section, and made the container larger than the section and centered. This means that the whole "triangle" created by the skew is hidden. You may have to play with the numbers, I just arbitrarily added 10% width on each side.
Also, your left:50% rule on the content wasn't doing anything because that element isn't relatively or absolutely positioned.
.apartments-showCase-content {
width: 50%;
background: grey;
height: 30em;
float: left;
box-sizing: border-box;
transform: skew(6deg);
}
.apartments-showCase-image {
width: 50%;
background: #222;
height: 30em;
float: right;
background: url(https://i.picsum.photos/id/1003/800/800.jpg);
background-size: cover;
transform: skew(6deg);
}
.apartments-section {
overflow: hidden;
}
.apartments-section-container {
width: 120%;
position: relative;
left: -10%;
}<section class="apartments-section">
<div class="apartments-section-container">
<div class="apartments-showCase-content"></div>
<div class="apartments-showCase-image"></div>
</div>
</section>Skew one side only of an element
See Snippet
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
position: relative;
background: #008dd0;
width: 100px;
border: none;
display: inline-block;
height: 90px;
padding: 0px;
margin: 0 1px;
}
.parallelogram:nth-child(1) {}
.parallelogram:nth-child(2) {
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
margin-left: 1px;
}
.parallelogram:nth-child(1):after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #008dd0;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram-btn:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
left: -51px;
z-index: -1;
background: #ffa008;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
position: relative;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
padding: 0px;
margin-left: 51px;
font-weight: 700;
cursor: pointer;
}<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>how to skew input in one side and backgroun-color rgba
For one side skew you need to use perspective with origin. How ever this method is only usable for an exact size of width and height e.g. 300px and 50px (not usable for sizes by percent).
I have to say that I found +26 degree skew for input by try and error to achieve a good appearance against -30 degree skew of label. You may need to modify these numbers according to the desired width.
label {
width: 300px;
height:50px;
-webkit-transform: perspective(300px) rotateX(30deg);
-o-transform: perspective(300px) rotateX(30deg);
-moz-transform: perspective(300px) rotateX(30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
display:inline-block;
border:2px solid #323232;
background:rgba(255, 0, 0, 0.3)
}
input {
width:280px;
height:48px;
border:1px solid #ff0000;
outline:0;
-webkit-transform: perspective(280px) rotateX(-26deg);
-o-transform: perspective(280px) rotateX(-26deg);
-moz-transform: perspective(280px) rotateX(-26deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}<label><input></label>Related Topics
Strip All HTML Tags Except Links
Font Awesome Is Not Showing Icon
How to Center-Align One Flex Item and Right-Align Another Using Flexbox
Making a Paragraph in HTML Contain a Text from a File
How to Write Equations in HTML
Rounded Corners in Outlook Without Images
Can Div with Contenteditable=True Be Passed Through Form
How to Put a <Style>...</Style> Tag Within the Body of a HTML File to Send in Email
How to Change Content on Hover
How to Make Select Elements Shrink to Max-Width Percent Style Within Fieldset
Overlay on HTML5 Fullscreen Video
Prevent Tabstop on a Element (Anchor Link) in HTML
Table Row Won't Contain Elements with Position:Absolute
How to Change an Image on Click Using CSS Alone
CSS Selector for Empty or Whitespace
Ios7 Font Size Change When Create Nsattributedstring from HTML
Why Alignment Mark List Is Different on Webkit When Using :Before Height