This question already has answers here:
How to create a Slanted Background with CSS? [duplicate]
(3 answers)
Closed 2 years ago.
need divide background on two parts:
I have:
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
}
As you can see there is divided into 3 actually, how to change it to have 2 as on image?
You could change the transform-origin to be at the bottom.
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
transform-origin: bottom;
}
Really simple fix without too much modification to your code. Just push the element off the screen and increase its width.
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0; right: -200px;
width: 60%; height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
}
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 70%;
height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
}
Related
So, I am wondering why this one div doesn't have same smooth edges just like the others when they have the same codes, I'm confused as to what might be the cause of this.
HTML
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
Style:
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(http://csshexagon.com/img/meow.jpg);
background-size: auto 346.4102px;
background-position: center;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
I try to setup the position of diffrent images on a site. I use the Avada Theme to create a basic column layout (3 colums, 2 rows) and css to make more specific configurations on it. My divs, which are containing the img's have IDs I use.
#note_col1_row1{
position: relative;
z-index: 1001;
top: 5%;
left: 3%;
-webkit-transform: rotate(-2deg) scale(1.3);
transform: rotate(-2deg) scale(1.3);
}
#note_col2_row1{
position: relative;
z-index: 1001;
bottom: 4%;
left: 4%;
-webkit-transform: rotate(4deg) scale(1);
transform: rotate(4deg) scale(1);
}
#note_col1_row2{
position: relative;
z-index: 1001;
left: 2%;
bottom: 22%;
-webkit-transform: rotate(2deg) scale(1.2);
transform: rotate(2deg) scale(1.2);
}
#note_col3_row1{
position: relative;
z-index: 1000;
top: 4%;
left: 5%;
width: 170px !important;
-webkit-transform: rotate(-2deg) scale(1.2);
transform: rotate(-2deg) scale(1.2);
}
#note_col2_row2{
position: relative;
z-index: 1000;
top: 5%;
left: 5%;
-webkit-transform: rotate(-4deg) scale(1.3);
transform: rotate(-4deg) scale(1.3);
}
#note_col3_row2{
position: relative;
z-index: 1000;
bottom: 15%;
-webkit-transform: rotate(2deg) scale(0.8);
transform: rotate(2deg) scale(0.8);
}
So now my problem is, if I load the page the bottom,top... positions don't apply to the divs. This only happens if I start the debug view via F12 and change a value to any other (for example "bottom: 22%;" to "bottom: 21%;").
Is there any reason why this behaves like this and any possibilty to solve the problem?
Try setting position to absolute rather than relative like this:
#note_col1_row1
{
position: absolute;
...
}
div.tp-border-bottom's border hide when div.tp-banner add transform property, if I set div.tp-border-bottom:after element height to 2px then it is visible, all of this in android webview platform
.tp-banner {
width: 100px;
height: 60px;
-webkit-transform: translate(0px, 0px) translateZ(0px);
transform: translate(0px, 0px) translateZ(0px);
}
.tp-border-bottom {
position: relative;
width: 100px;
height: 60px;
}
.tp-border-bottom:after {
content: "";
position: absolute;
font-size: 0;
line-height: 0;
background-color: #e1e1e1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform-origin: 0 1px;
-ms-transform-origin: 0 1px;
transform-origin: 0 1px;
}
.tp-border-scale:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
/*#media only screen and (-webkit-min-device-pixel-ratio: 3) {
.tp-border-bottom:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
}*/
<div class="tp-banner"></div>
<div class="tp-border-bottom tp-border-scale"></div>
Try to add this style to all the transformed elements:
-webkit-backface-visibility: hidden;
Taken from similar question CSS3 hover effects make weird impact on other elements in Chrome
This question already has answers here:
Left/right transparent cut out arrow
(4 answers)
Closed 6 years ago.
I'm trying to put a transparent arrow on the right side of an image, vertically in the centre and showing the background image.
I've read this answer, and this codepen is basically exactly what I want, but I can't get my head around why it works and what I'd need to change to place it on the right hand side.
Codepen code:
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
There are two polygons with white background over the image, it is not an arrow but the space between the two polygons. Changin the width and the position of :before and :after you can move the triangle.
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 100%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 97%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
In Firefox in some resolutions appears a pixel of the image in the bottom, can fix width bottom:-1px in .wrap::before, .wrap::after
Main css properties that you need to change are transform-origin and transform with some other changes as done below:
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
right: 0;
height: 50%;
background-color: inherit;
padding-right:3%;
}
.wrap:before {
bottom: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewY(45deg);
-webkit-transform: skewY(45deg);
transform: skewY(45deg);
}
.wrap:after {
top: 50%;
-ms-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-ms-transform: skewY(-45deg);
-webkit-transform: skewY(-45deg);
transform: skewY(-45deg);
}
<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
This is my HTML code:
<style>
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
border:#000000 solid 2px;
width:500px;
height:500px;
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0%;
left: 0%;
z-index: -1;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
background: url(image.jpg) 0 0 no-repeat;
}
</style>
<div id="myelement"></div>
This is image.jpg file:
This is output of browser:
Here, background image is fixed and container is rotating. I want to make reverse. i,e Container will be fixed and background will rotate.
If I understood your question properly, you only need to apply transform: rotate on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement {
position: relative;
overflow: hidden;
border: #000000 solid 2px;
width: 100px;
height: 100px;
}
#myelement:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
transform: rotate(30deg);
background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}
<div id="myelement"></div>