How to create a Slanted Background with CSS?
You can use pseudo element with skew transformation :
body {
height: 100vh;
margin: 0;
background: yellow;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #000;
transform: skew(-30deg);
transform-origin:top;
}how to create a slanted transparent shape with background image?
here i tried the example, i hope this will help you ,just copy the entire code in an html page and see the output..., or see snippet below
.hero img {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
.promo {
-webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
}
.hero {
color: #fff;
font-family: 'Fira Sans', sans-serif;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.hero img {
width: 100%;
}
.hero figcaption {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.hero h1 {
font-size: 32px;
}
.hero p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.promo {
background: url(https://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg) no-repeat;
background-size: cover;
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 50px 0;
overflow: hidden;
padding: 150px 20px;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.promo h1 {
font-size: 32px;
}
.promo p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.quote {
background: #41ade5;
position: relative;
z-index: 1;
}
.quote:before, .quote:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.quote:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.quote:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.quote {
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 50px 0;
padding: 20% 20px;
text-align: center;
}
h1 {
font-size: 32px;
font-weight: 500;
}
.edge--bottom {
position: relative;
z-index: 1;
}
.edge--bottom:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--bottom:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.edge--bottom--reverse {
position: relative;
z-index: 1;
}
.edge--bottom--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--bottom--reverse:after {
bottom: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.edge--top {
position: relative;
z-index: 1;
}
.edge--top:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--top:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.edge--top--reverse {
position: relative;
z-index: 1;
}
.edge--top--reverse:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--top--reverse:before {
top: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.edge--both {
position: relative;
z-index: 1;
}
.edge--both:before, .edge--both:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--both:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.edge--both:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.edge--both--reverse {
position: relative;
z-index: 1;
}
.edge--both--reverse:before, .edge--both--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--both--reverse:before {
top: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.edge--both--reverse:after {
bottom: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.-berry {
background: #b52b4a;
}
.-blue {
background: #41ade5;
}
.-orange {
background: #de6628;
}
.-green {
background: #5e9b42;
}
.block {
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 0 0 200px;
padding: 20% 20px;
text-align: center;
}
h1 {
font-size: 32px;
font-weight: 500;
}
p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}<div class="hero">
<figure>
<img src="https://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg" /><figcaption>
<h1>
Angled Edge
</h1>
<p>
Image with CSS clip-path
</p>
</figcaption>
</figure>
</div>
<div class="promo">
<h1>
Angled Edge
</h1>
<p>
CSS background with CSS clip-path
</p>
</div>
<div class="quote">
<h1>
Angled Edges
</h1>
<p>
With 2 Pseudo Elements
</p>
</div>
<div class="block -berry edge--bottom">
<h1>
Bottom Angled Edge
</h1>
</div>
<div class="block -blue edge--bottom--reverse">
<h1>
Bottom Angled Edge
</h1>
<p>
Reversed
</p>
</div>
<div class="block -berry edge--top">
<h1>
Top Angled Edge
</h1>
</div>
<div class="block -blue edge--top--reverse">
<h1>
Top Angled Edge
</h1>
<p>
Reversed
</p>
</div>
<div class="block -orange edge--both">
<h1>
Top & Bottom Angled Edges
</h1>
</div>
<div class="block -green edge--both--reverse">
<h1>
Top & Bottom Angled Edges
</h1>
<p>
Reversed
</p>
</div>CSS Slanted Background (not full width / a bit different)
This is the closest I could get to that image. I hope, this helps.
#hero .bg {
background: #8c57d1; /* Old browsers */
background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 90%;
position: absolute;
left:-60px;
top:-10px;
box-sizing: border-box;
border-bottom-right-radius: 20px;
padding: 50vh 0px;
-ms-transform: skew(-10deg,0deg);
-webkit-transform: skew(-10deg,0deg);
transform: skew(-10deg,0deg);
}
#hero .bg:after {
content: "";
bottom: 0;
position: absolute;
left: 0;
height: 0;
width: 0;
border-color: transparent transparent #FFFFFF transparent;
border-style: solid;
border-width: 0 0 15vw 100vw;
}
<section id="hero">
<div class="bg"></div>
</section>How to create a slanted transition in CSS?
body{
margin: 0;
}
.dark, .light {
min-height: 50vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.dark{
background-color: darkgrey;
min-height: calc(50vh + 60px);
}
.dark > div, .light > div{
font-size: 30px;
color: black;
font-family: Arial,sans-serif;
}
.light{
background-color: lightgrey;
}
.dark::before{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
bottom: 0;
border-bottom: 60px solid lightgrey;
border-left: calc(100vw - 17px) solid transparent;
}<section class="dark">
<div>CONTENT 1</div>
</section>
<section class="light">
<div>CONTENT 2</div>
</section>Responsive slanted div with background
Here's my jsFiddle.
The slant div is responsive. In my case, I used pseudo element like :after. :)
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slantedDivA{ width: 100%;
text-align: center;
font-size: 36px;
padding: 10% 25px;
background: gray;
color: #fff;
position: relative; }
.slantedDivA:after{ content: "";
border-left: 99.58vw solid gray;
border-top: 20px solid transparent;
border-bottom: 43px solid transparent;
bottom: -43px;
position: absolute;
left: -10px; } <div class="slantedDivA">
<div class="test">Hello</div>
</div>How to do this angle background by CSS?
You can achieve that with CSS.
The idea is to have 3 blocs :
- a container (which will contain the image as background)
- an empty block which will be rotated to simulate the triangle
- a div wich will contain the text
The idea is to rotate the empty block to get the angle you need.
To create the "triangle" effect, we use the overflow:hidden on the container to act as a mask (you also need to make the rotated block bigger than hte container to cover it despite the rotation).
Then you define the triangle & content blocks positions & z-index to superpose them.
Note : You don't necessary have to put the image as the background of the container block. you can also display with an img tag and use z-index again to display the 3 blocks on top of each other.
.container,
.rotated-block {
display:block;
}
.container {
background: #000000;
width: 600px;
height: 350px;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
}
.rotated-block {
position: absolute;
zi-index: 1;
width: 100%;
min-height: 150%;
background: #FFFFFF;
transform: rotate(-20deg);
left: -40%;
top: -7%;
}
.content {
position: relative;
z-index: 3;
top: 35%;
left: 10%;
}<div class="container">
<div class="content">
<p>Purly made with HTML & CSS</p>
</div>
<div class="rotated-block"></div>
</div>Angled lines on background CSS
div{
width: 250px;
height: 150px;
background-color: #999;
transform: skewY(-2deg);
margin-left: 25px;
}<div>
</div>Related Topics
Link to a Section of a Webpage
<Br> Not Causing New Line on Chrome
How to Center a Container in My HTML/Css
How to Make Sure That My Footer Shows All the Way at End of the Page Rather Than in the Middle
Applying a Backdrop-Filter: Blur(); to an Svg Path
Override Overflow:Hidden with Z-Index
Change the Column Order in a CSS Grid
Change Checkbox Check Image to Custom Image
Changing the Text Selection Color Using CSS
Pure CSS Continuous Horizontal Text Scroll Without Break
HTML Generated Microsoft Word Document with Header, Footer and Watermark
Horizontal Border Across Entire Row of CSS Grid
Scope External CSS File for Div(No CSS File Should Link Only )