This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 years ago.
I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.
Here is some code I have tried but doesn't look how I want.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}
<body>
<div class="block">
</div>
</body>
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;
}
To keep the same visual on resize, set a big fixed height for the pseudo element and center it:
html {
background: yellow;
}
html:before {
content: "";
position: fixed;
top: calc(50% - 1000px);
left: 0;
width: 500px;
height:2000px;
background: #000;
transform: skew(-15deg);
transform-origin:top;
}
Use a linear gradient at an angle
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
.left-sidebar {
position: absolute;
width: 20%;
background: #000;
transform: skewY(5px);
}
.content {
background: #fff;
}
The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.
But I suggest that you create 2 div side-by-side in order to get the desired effect.
Related
As shown in image , there is navy blue color given to div inclinedly, how can do it using bootstrap in asp.net core project?
You cannot do with bootstrap. However i have used CSS Path to create the same shape
You can use this website to make CSS Path
.backgroundCover {
height: 200px;
width: 200px;
background: blue;
border:1px solid black;
}
#clipPath {
height: 200px;
width: 200px;
background: white;
clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="backgroundCover">
<div id="clipPath">
</div>
</div>
You can also use the :after and :before pseudo elements to create rectangles and then rotate them. This has higher support rate by using transform instead of clip-path in terms of old browsers.
body { background: black; }
.container {
width: 200px;
height: 260px;
background: white;
overflow: hidden;
position: relative;
}
.container:before,
.container:after {
content: '';
width: 50%;
height: 50%;
position: absolute;
background: #0d2e41;
bottom: -25%;
}
.container:before {
transform: rotateZ(135deg);
left: -25%;
}
.container:after {
transform: rotateZ(225deg);
right: -25%;
}
<div class="container">
</div>
This question already has answers here:
How to make "see through" text?
(2 answers)
Closed 5 years ago.
.parent-div {
background-image: url(path\to\image);
background-size: cover;
}
.text-div {
/* make text transparent but not this background */
background-color: orange;
}
<div class="parent-div">
<div class="text-div">Welcome!</div>
</div>
I want to make the text of text-div to be transparent so that I can see background of parent-div. and remaining part of text-div must be opaque.
Basically I want this effect :
I found an answer for my question here:
https://codepen.io/zFunx/pen/EbOQow
body {
padding: 0;
margin: 0;
height: 100%;
}
.overlay {
background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTM2NDExNjNf?inline=1);
height: 100%;
position: relative;
background-size: cover;
}
.overlay h1 {
position: absolute;
background-color: #000;
color: #fff;
mix-blend-mode: multiply;
text-align: center;
font-size: 3em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="overlay">
<h1>Mix-Blending in CSS</h1>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get...
There seems to be a lot of examples of 'slanted-edge' divs, but I can't find any with the particular right-side slanted.
I have spend a great deal of time trying to alter the codes of the others, but it ends up in a mess.
This is the original CSS code I was experimenting with to get the results I need...
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
body {
background:
url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
background-size: cover;
}
Here is the HTML....
<div>Slanted div text</div>
<div>
Slanted div text<br/>
on several lines<br/>
Another line
</div>
<div>Wider slanted div text with more text inside</div>
Create your div, then overlay an absolutely-positioned, rotated pseudo-element to create the slanted impression.
div {
height: 50px;
width: 300px;
background-color: black;
position: relative;
overflow: hidden;
}
div:after {
height: 100%;
width: 100%;
background-color: white;
position: absolute;
content: "";
transform: rotate(45deg);
transform-origin: bottom right;
}
<div></div>
I have an idea for an Ajax-loader.
This is what I have accomplished so far:
body {
background-color: lightGrey;
counter-reset: h1-counter;
}
.wrap {
max-width: 200px;
height: 50px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.wrap div {
background: linear-gradient(#0032f0, white, #0032f0);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
opacity: .8;
}
.wrap div.dark-bar {
position: absolute;
width: 10%;
height: 100%;
animation: moveDarkBar 3s linear infinite;
z-index: 1;
}
#keyframes moveDarkBar {
from {
left: -20%;
}
to {
left: 120%;
}
}
<div class="wrap">
<div></div>
<div class="dark-bar"></div>
</div>
I want the moving indicator (.dark-bar) to be "melted" with foreground-div. Currently there is a hard line which is visually distinguishable.
Is there a way to get the moving indicator (.dark-bar) to be blurred on the left-, right edge?
You could make use of CSS filter to add blur to top layer which is animated as below,
filter - The filter property provides graphical effects like blurring,
sharpening, or color shifting an element. Filters are commonly used to
adjust the rendering of images, backgrounds, and borders.
Do include vendor prefixes for other browsers such as -webkit-,-o-,-moz-,-ms- to filter.
body {
background-color: lightGrey;
counter-reset: h1-counter;
}
.wrap {
max-width: 200px;
height: 50px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.wrap div {
background: linear-gradient(#0032f0, white, #0032f0);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
opacity: .8;
}
.wrap div.dark-bar {
position: absolute;
width: 10%;
height: 100%;
animation: moveDarkBar 3s linear infinite;
z-index: 1;
-webkit-filter:blur(2px); /*Add this*/
}
#keyframes moveDarkBar {
from {
left: -20%;
}
to {
left: 120%;
}
}
<div class="wrap">
<div></div>
<div class="dark-bar"></div>
</div>
Try using the box-shadow property and set the vertical and horizontal axis values to 0. Something like this:
div {
box-shadow: 0 0 10px black;
}
This might be a similar effect for the one you want.
Hello I want to achieve similar to this image.
Here is my css code
*{
background:#444;
margin:0;
padding:0;
}
.display{
width:100%;
min-height:100%;
background:green;
position:fixed;
}
.one{
width:100%;
height:300px;
margin-top:-200px;
background:red;
transform: rotate(45deg);
}
.two{
width:100%;
height:450px;
margin-top:200px;
background:blue;
transform: rotate(45deg);
}
I've try to achieve similar positioning here is my Code is here
My question is - What could you suggest me to achieve similar positioning?
Is it good to use transform for 4 div images and positioning them?
Assuming this is a background, let's simplify it with a single HTML element.
Top and bottom background colors are a single gradient with two colors
left and right background colors are :before and :after pseudo elements rotated with transform: rotate
The before and after pseudo elements get z-index: 1. Elements that should be above them get position: relative and z-index: 2
Example
body {
background: #212121;
}
div {
background: #F00;
height: 500px;
width: 500px;
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #EB1249 0%, #EB1249 50%, #251F39 50%, #251F39 100%);
margin: 0 auto;
}
div:before {
content: '';
display: block;
position: absolute;
top: 0;
left: -70%;
transform: rotate(45deg);
background: #fce4ec;
width: 100%;
height: 100%;
z-index: 1;
}
div:after {
content: '';
display: block;
position: absolute;
top: 0;
right: -59.3%;
transform: rotate(45deg);
background: #F5B8A2;
width: 90%;
height: 100%;
z-index: 1;
}
<div></div>
This is pretty easy if you set the transform-origin to the corners of your boxes. Basically, instead of rotating from the middle, you can rotate from the corner. So You'd have two boxes at, for instance:
right : 200px;
bottom : 200px;
transform-origin : 100% 100%;
one rotated 45deg, the other -45deg. Then the other two at 190, 210 or whatever. Note that you also need -webkit-transform-origin, -ms-transform-origin, -moz-transform-origin, -o-transform-origin