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
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:
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.
In the css I have a few images in the style folder so ignore the other images that don't show up. The floating element leftpara and joinbutton(eventhough it's a para not the button) have background white and i want to give it an opacity of .4.
#stuff:before{
display: block; content:""; position: absolute; z-index:-1;
background: url(blah.jpg);
opacity:.3;
top:10%; left: 0; right: 0;
height: 50%;
}
fiddle
You can try this code:
withhsla(0,0%,100%,0.70) or rgba you use a white background with whatever percentage saturation or opacity to get the look you desire.
and you can use filter: alpha(opacity=50); to get the opacity
background-attachment: fixed;
background-image: url(blah.jpg);
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: hsla(0,0%,100%,0.70);
background-blend-mode: overlay;
background-repeat: no-repeat;
filter: alpha(opacity=50);
Your question is slightly vague, however the following code applies "a background on a floating element in css3 and changes its opacity?
div{
float: right;
display:block;
width: 350px;
height: 150px;
background-image: url(http://placehold.it/350x150/ff0000/ffffff);
opacity: 0.5;
}
<div></div>
I am looking for a way to create a div with CSS that looks like this graphic:
The bottom on the right is not white but transparent.
How would that be possible?
Method #01:
Use transformed pseudo element i.e :before or :after.
body {
background: #ccc;
}
div {
position: relative;
overflow: hidden;
height: 100px;
}
div:before {
transform: rotate(-3deg);
position: absolute;
background: brown;
height: 100%;
bottom: 40%;
content: '';
right: -50px;
left: -50px;
}
<div></div>
Method #02:
Use css3 linear-gradient.
background: linear-gradient(175deg, brown 60%, transparent 60%);
div {
background: linear-gradient(175deg, brown 60%, transparent 60%);
height: 100px;
}
<div></div>
You can use transformations. Here is an example.
#me {
margin-left:-100px;
margin-top:-100px;
width:150%; height:200px;
color:#FFF;
background-color:#8B1414;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#wrapper {
min-height:200px; background-color:#000; padding:20px; overflow:hidden;
}
<div id="wrapper">
<div id="me">asdf</div>
</div>
You can use a linear-gradient background. This would work like this:
<div class="box">
</div>
.box {
width: 700px;
height: 100px;
background: linear-gradient(to left top, transparent 50%, red 50%)
}
Or you could use CSS transform to rotate the box. How to do this you can see here
You haven't specified if the width is constant, so I'll assume it is not (responsive design?) and I also assume, that you want to have a constant angle independently on the width of the <div></div>.
To achieve this you will, however need to use SASS with some math-enhancing libraries (ie. Compass, Sassy-Math). These will give you the pow(), sqrt(), and sin() functions necessary for the Pythagorean calculations.
Here is the basic function that will calculate the height of the tilted edge depending on the angle you want the tilt to take.
#function get-tilted-height($angle) {
$a: (100% / 1%);
$A: (90deg - $angle);
$c: ($a / sin($A));
$b: sqrt(pow($c, 2) - pow($a, 2));
#return (abs($b) * 1%);
}
Now for the SASS mixin.
#mixin tilted($angle, $color, $position: 'top', $pseudo: 'before') {
$height: get-tilted-height($angle);
position: relative;
background-color: $color;
&::#{$pseudo} {
content: '';
padding-top: $height;
position: absolute;
left: 0;
right: 0;
#if ($position == 'top') {
bottom: 100%;
background-image: linear-gradient($angle, $color 50%, transparent 50%);
} #else {
top: 100%;
background-image: linear-gradient($angle, transparent 50%, $color 50%);
}
}
}
Then you just include the mixin in your code like this:
.container {
#include tilted(3deg, rgb(255, 255, 255), bottom);
padding: 0 1em;
max-width: 80%;
margin: 0 auto;
filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}
Note the position: relative that the container aquires, so then we can position the ::after pseudo-element absolutely. Also the height of the tilt is defined by padding-top as you can't rely on height that is computed from the parents height.
My credit goes to Hugo Giraudel and his brilliant article on Sitepoint, which I recommend you to read to find out more details. And here is a link to CodePen where you can see it in action: http://codepen.io/SitePoint/pen/dppJzX
You can also do this way.
.container{
position:relative;
width:100px;
height:40px;
overflow:hidden;
background-color:transparent;
}
.child{
position:absolute;
top:-40px;
left:-30px;
width:150px;
height:60px;
background-color:#8D120D;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
<div class="container">
<div class="child">
</div>
</div>
I am trying to create a div with a background image (background-size:cover) with this shape cut out in the center top of the div.
The div above the div I want to cut this shape out of has background-image:cover on it as well. I'm trying to do this with a CSS shape, moving the lower div up using a negative margin top, so the background image on the div above shows through the cut out shape.
Note: The shape has to look identical or almost identical to the image, as it is part of a site designed by someone else, and they are very specific with their designs.
Anyone out there know how to create this shape?
EDIT: #SZenC offered a really cool solution that I implemented, except it leaves me with colored shapes overlayed on top of background images. See image:
I need the light blue pattern to show through where the gray is, and the purple texture to show through where the white is. I'm not sure at this point if this is possible, at least with CSS.
The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).
The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.
So example below.
#c1 {
position: relative;
width: 200px;
height: 190px;
overflow: hidden;
}
#c2 {
position: relative;
top: 0px;
width: 200px;
height: 200px;
background-color: gray;
}
.pointy {
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 10px;
background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
position:absolute;
background-color:red;
width:20px;
height:10px;
background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
}
.pointy>.curve-left{
border-top-right-radius:100%;
background-position:120px 0;
left:0;
}
.pointy>.curve-right{
border-top-left-radius:100%;
background-position:80px 0;
right:0;
}
<div id="c1">
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
<div class="pointy">
<div class="curve-left"></div>
<div class="curve-right"></div>
</div>
<img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>
Here you could use a couple of pseudo elements with border radius to create that curved shape.
note there are multiple elements in this demo to show how this could be used in practice
.image {
height: 300px;
width: 80%;
background: url(http://lorempixel.com/900/500);
position: relative;
display: inline-block;
}
.shape {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: url(http://lorempixel.com/900/400);
background-position: 0 60px;
}
.shape:before,
.shape:after {
content: "";
position: absolute;
background: inherit;
height: 100%;
top: 0;
width: 50%;
transform: translateY(-100%);
}
.shape:before {
left: 0;
border-radius: 0 50% 0 0;
background-position: 0 90px;
}
.shape:after {
left: 50%;
border-radius: 50% 0 0 0;
background-position: -100% 90px;
}
<div class="image">
<div class="shape"></div>
</div>
Another, more in practical approach (with responsiveness), would be something like:
.wrap{
width:100%;display:inline-block;
position:relative;
height:600px;
}
.wrap img:first-child{
top:0;z-index:5;
}
.wrap img:last-child{
top:40%;
}
.wrap img{
position:absolute;
height:50%;width:100%;
}
.wrap .splitter{
z-index:10;
position:absolute;
top:40%; width:100%;
height:10%;
}
.wrap .splitter:before, .wrap .splitter:after{
content:"";
position:absolute;
width:50%;
height:100%;
background-size:200% 500%;
border-radius: 0 100% 0 0;
}
.wrap .splitter:after{
left:50%;
background-position:-100% 0;
border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{ background-image:url("http://lorempixel.com/450/250");}
<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
<span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>