I would like to keep this shape so it is responsive and keeps the same direction, and that it can still scroll down the page. The problem is that because of its size it scrolls left and right, which I wish to avoid.
If I set overflow: hidden; to its parent element (body), it causes all other content to vanish in the bottom when it reaches it.
Is there a way to prevent the page to scroll left and right, to "cut" the extra part? Thank you
Here's the fiddle: https://jsfiddle.net/oytvt0p7/
#angled-shape {
width: 3000px;
height: 800px;
background-color: lightgrey;
margin-top: 50px;
margin-left: -1000px;
position: absolute;
z-index: -1;
overflow: hidden;
-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari */
transform: rotate(-30deg); /* Standard syntax */
}
<div id="angled-shape"></div>
You can just set overflow-x: hidden;, so scrolling in y direction will be nevertheless possible:
body {
overflow-x: hidden;
}
#angled-shape {
width: 3000px;
height: 800px;
background-color: lightgrey;
margin-top: 50px;
margin-left: -1000px;
position: absolute;
z-index: -1;
overflow: hidden;
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
/* Safari */
transform: rotate(-30deg);
/* Standard syntax */
}
<div id="angled-shape"></div>
Try bellow CSS
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0;
Related
The problem I have is whenever I flip the card(by hovering on the card) the text containing in the flipcard(Yellow or Red) depending on the flipcard you hover gets mirrored, how should I code to avoid text mirroring? I am new , please help as I am new to HTML concepts
img {
width:200px;
height:200px;
}
.flip-card {
display:inline-block;
width: 200px;
height: 200px;
border: 5px solid #555;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: absolute:
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.centrd {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the back side */
.flip-card-back {
background-color: lightgrey;
color: red;
transform: rotateY(180deg);
}
<div class="flip-card">
<div class="flip-card-inner"><div class="centrd">Yellow</div><img src="yellow.png">
</div>
</div>
I have an idea, let's rotate the text in reverse to the card. Wonder if it'll work.
Caveat: You will have to center the centrd element without transform because you can't have 2 transforms.
Edit: however when combined with image the effect is a little different. Might as well position absolute the centrd word which is a more natural solution to keep the word out of the flow of the card.
img {
width: 200px;
height: 200px;
}
.flip-card {
display: inline-block;
width: 200px;
height: 200px;
border: 5px solid #555;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: absolute: width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card:hover .centrd {
transform: rotateY(-180deg);
}
.flip-card .centrd {
transition: transform 0.8s;
transform-style: preserve-3d;
}
.centrd {
position: absolute;
width: 100%;
top: 50%;
text-align: center;
font-weight: bold;
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the back side */
.flip-card-back {
background-color: lightgrey;
color: red;
transform: rotateY(180deg);
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="centrd">Yellow</div><img src="yellow.png">
</div>
</div>
I am trying to horizontally center align a inline-block element that also has a fixed position. This is because this element is also being animation via transform translation. Current attempt looks like this:
.cd-nav-trigger {
position: fixed;
display: inline-block;
}
.cd-nav-trigger {
bottom: 7%;
left: 48.25%;
top: auto;
right: auto;
width: 44px;
height: 44px;
z-index: 5;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-overlay-nav, .cd-overlay-content {
/* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
position: fixed;
bottom: 7%;
left: 48.25%;
height: 4px;
width: 4px;
-webkit-transform: translateX(20px) translateY(-20px);
-moz-transform: translateX(20px) translateY(-20px);
-ms-transform: translateX(20px) translateY(-20px);
-o-transform: translateX(20px) translateY(-20px);
transform: translateX(20px) translateY(-20px);
}
HTML implementation is this:
</div> <!-- cd-overlay-content -->
Menu<span class="cd-icon"></span>
</div>
The left property is not allowing me to correctly align the element, even when set to 50%. Any help would be appreciated.
Try to add a negative margin-left (half of the width)
.cd-nav-trigger {
position: fixed;
bottom: 7%;
left: 50%;
width: 44px;
height: 44px;
margin-left: -22px;
}
Menu<span class="cd-icon"></span>
Is it possible to have a div with a background image which has a skewed bottom AND round corners?
Most examples use only a background color which doesn't have the duplicate image problem that a background image has.
CSS clipping path
The clipping path option works however, it has no support on IE 11.
Closest solution so far
The HTML:
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
The CSS:
.container {
overflow: hidden;
padding-bottom: 40px;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
https://jsfiddle.net/Spindle/81e30bmx/
But the problem with this is that the round corners aren't visible anymore as well...
Adding border-radius to parent div could work, as it will work as border-radius for four corner and then individually using border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius you can change and align accordingly as below and thus it skews at bottom-left along-with border-radius at 4 sides,
.container {
overflow: hidden;
padding-bottom: 40px;
border-top-right-radius:16px;
border-bottom-right-radius:14px;
border-top-left-radius:40px;
margin-top:40px;
display:inline-block;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
It is possible and does seems to work on your example.
If you are talking about the top left and right corners getting chopped off, then what you need to do is add a margin to the top so:
#parallelogram { margin: -41px 0 0 0; }
Would become:
#parallelogram { margin: 23px 0 0 0; }
This will adds the hole shape in.
Following this question, I created a JSFiddle, but the output doesn't seem so good:
Here is the CSS, taken from the answer there:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
/* leave some space above */
}
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
#heart:before {
-webkit-transform: rotate(-45deg);
/* 45 degrees rotation counter clockwise */
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
/* Rotate it around the bottom-left corner */
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
/* placing the right part properly */
-webkit-transform: rotate(45deg);
/* rotating 45 degrees clockwise */
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
/* rotation is around bottom-right corner this time */
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Did I miss something, or that love got old (it's about 2 years old)?
I was messing around a bit with your JSfiddle and I noticed that you were only drawing one side of your heart :(
Here's the updated CSS that will fix your poor broken heart
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
Here's a link to the working JSfiddle: https://jsfiddle.net/arfc63Le/1/
You missed the second selector for your second CSS rule.
The four rules should be:
#heart {}
#heart:before,
#heart:after {}
#heart:before [}
#heart:after {}
Here is the full demo:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
top: 0;
width: 52px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
}
#heart:before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
<div id="heart"></div>
Looks like you missed one of the steps. It isn't very obvious in the other answer.
You need a copy of
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
for #heart:after. So you need to add the following and it works (JSFiddle)
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
I'm running into this anti-aliasing Chrome bug that I can't seem to work out.
I have two types of containers being rotated with the transform property. Type A has a solid color background. Type B has an image background with a background-attachment:fixed property to force it to line up with the background image of the container it's on top of.
Both types rendered a jagged edge in Chrome after being rotated. The jagged edge on type A was solved with -webkit-backface-visibilty: hidden;, so I don't need any help on that one. However, I had no such luck with that trick on container Type B. Using that class broke the background image and fixed image 'parallax' functionality.
I've tried just about every remedy I can find on various forums and keep striking out. Anybody have any ideas as to how to clean this up? Example below, easiest to see on the bottom edge of the image container in Chrome (I'm in version 44.0.2403.130 (64-bit))!
HTML
<div class="spacer"></div>
<div class="content">
<div class="back" style="background-image:url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');">
<div class="bottom-divider"></div>
</div>
</div>
<div class="spacer"></div>
CSS
body {
margin: 0;
padding: 0;
}
.content {
position: relative;
margin-bottom: 250px;
z-index: 9999;
}
.back {
min-height: 500px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.spacer {
height: 200px;
background-color:#191919;
position: relative;
z-index:9;
}
.bottom-divider::before {
background-image: url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');
background-position: center center;
background-size: cover;
background-attachment: fixed;
content:" ";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.bottom-divider {
bottom: -50px;
margin-top: -63px;
transform: rotate(2deg);
-webkit-transform:rotate(2deg);
z-index: 99;
margin-left: 0;
width: 110%;
position: absolute;
bottom: -57px;
overflow: hidden;
height: 77px;
}
https://jsfiddle.net/raf8mb04/
Use -webkit-backface-visibility: hidden;
DEMO