I am trying to create a button with two slanted lines. One from the bottom left to the right center which I managed. The next one needs to be from the top left to the right.
The height of the left side is 50px and the height of the right side should be 30px
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
z-index: 1000;
}
.slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
I tried to do this with a :before but this didn't work out.
Suggestions are very much appreciated.
Thanks very much.
It works find using ::before. Just change the transform-origin:
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
margin: 30px;
z-index: 1;
}
.slantedButton:before, .slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.slantedButton:before {
transform-origin: top right;
transform: skewY(4deg);
}
.slantedButton:after {
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
Related
In my webpage I have a left and a right part, they are not on the same nesting though. I want the left part to fill 25% of the page and the right part to fill the rest of the width.
Simply putting 75% isn't cutting it for me because the right part also needs a 30px right margin. A right padding won't work because my content and background-color overflows then.
Do you have an idea how to solve this?
The .left (blue) and .right(yellow) div should always perfectly meet each other and the .right needs to keep it's 30px right margin.
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: 75%;
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
It's not a good idea to create a layout using only absolute position. You may better rely on flexbox for example:
body {
height: 100vh;
margin: 0;
display: flex;
background: grey;
}
.left {
flex: 1;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
flex: 4;
margin-top: 45px;
margin-right: 30px;
background-color: yellow;
}
<div class="left">TEST</div>
<div class="right">TEST</div>
But in case you want to keep your code, you need to consider the margin within the calculation of the width:
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: calc(75% - 30px);
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
I have created a code for setting up sketch style borders over image.
Which can be seen below:
jQuery('.border').click(function(){
jQuery('.border').toggleClass('resize');
});
body {
background-color: lightblue;
}
.border {
width: 200px;
margin: 0px auto;
position: relative;
-webkit-transition: all 2s;
/* Safari */
transition: all 2s;
background-image: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400-sides.png);
background-repeat: repeat-y;
background-size: 100%;
border-radius: 15px;
background-position: 0 0;
padding: 5px;
overflow: hidden;
}
.border .padding::before, .border .padding::after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0;
background: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400.png) no-repeat;
background-size: 100%;
z-index: 50;
padding-bottom: 5.4%;
pointer-events: none;
}
.border .padding::before {
top: 0px;
}
.border .padding::after {
bottom: 0px;
background-position: 0px 100%;
}
.border.resize {
width: 500px;
}
img {
width: 100%;
height: auto;
position: relative;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="border">
<div class="padding">
<img src="https://nosycrow.com/wp-content/uploads/imported-books/Spectre-Collectors-Too-Ghoul-For-School-312087-3-593x911.jpg" alt="">
</div>
</div>
But the issue is, the box is not accurately responsive. To test it out, I have added a little jquery script so when you click on the image, the image resizes. And you can see when the image is bigger, the borders doesn't look aligned properly.
I know in my solution, to fix this I have to add media queries so the borders on top and borders can be adjusted in media queries. But is there any better solution then that?
I got it fixed using different solution. Kind of old school. I used 3 images, horizontal line, vertical line and corner and used them to set up in their position using different divs. Can be seen here
jQuery('.sketchy-box').click(function(){
jQuery('.sketchy-box').toggleClass('resize');
});
.sketchy-box {
width: 300px;
height: auto;
margin: 0px auto;
position: relative;
-webkit-transition: all 1s;
/* Safari */
transition: all 1s;
}
.sketchy-box .bdt {
position: absolute;
z-index: 1;
left: 10px;
top: 0px;
width: calc(100% - 20px);
height: 5px;
background: url("http://aslamdoctor.com/taskapp/horizontal-stroke#4x-100.svg") left top repeat-x;
}
.sketchy-box .bdb {
position: absolute;
z-index: 1;
left: 10px;
bottom: 0px;
width: calc(100% - 20px);
height: 5px;
background: url("http://aslamdoctor.com/taskapp/horizontal-stroke#4x-100.svg") left top repeat-x;
transform: rotate(180deg);
}
.sketchy-box .bdl {
position: absolute;
z-index: 1;
left: 0px;
top: 10px;
width: 5px;
height: calc(100% - 20px);
background: url("http://aslamdoctor.com/taskapp/vertical-stroke#4x-100.svg") left top repeat-y;
transform: rotate(180deg);
}
.sketchy-box .bdr {
position: absolute;
z-index: 1;
right: 0px;
top: 10px;
width: 5px;
height: calc(100% - 20px);
background: url("http://aslamdoctor.com/taskapp/vertical-stroke#4x-100.svg") left top repeat-y;
}
.sketchy-box .corner {
position: absolute;
z-index: 1;
width: 13px;
height: 13px;
background: url("http://aslamdoctor.com/taskapp/corner-stroke#4x-100.svg") left top no-repeat;
}
.sketchy-box .ctl {
left: 0px;
top: 0px;
}
.sketchy-box .ctr {
right: 0px;
top: 0px;
transform: rotate(90deg);
}
.sketchy-box .cbl {
left: 0px;
bottom: 0px;
transform: rotate(-90deg);
}
.sketchy-box .cbr {
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.sketchy-box img {
width: 100%;
height: auto;
position: relative;
z-index: 0;
border-radius: 10px;
}
.sketchy-box.resize {
width: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sketchy-box">
<div class="bdl"></div>
<div class="bdr"></div>
<div class="bdt"></div>
<div class="bdb"></div>
<div class="corner ctl"></div>
<div class="corner ctr"></div>
<div class="corner cbl"></div>
<div class="corner cbr"></div>
<img src="https://nosycrow.com/wp-content/uploads/2015/09/BooksAlways_26-27-593x320.jpg" alt="">
</div>
I am currently trying to build a portfolio website. Here is my landing page idea:
The part that I am struggling with regarding this design is positioning the down arrow so that it straddles the angled div regardless of screen width.
The closest that I have been able to come is by assigning the following values to the button...
position: absolute;
top: 290px;
left: 30%;
Here is my code:
*,
*:before,
*:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
section {
width: 100%;
min-height: 400px;
}
.bg-hero {
background: #00C1F7;
position: relative;
}
.bg-dark {
background: #003342;
position: relative;
}
.angled-div::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
transform-origin: left bottom;
transform: skewY(-3deg);
z-index: 1;
}
.button {
height: 150px;
width: 150px;
position: absolute;
top: 290px;
left: 30%;
background: #003342;
border-radius: 150px;
z-index: 2;
}
.button span {
width: 100%;
text-align: center;
color: white;
position: absolute;
top: 20px;
font-size: 62px;
}
.button:hover {
cursor: pointer;
background: #004472
}
<section class="bg-hero"></section>
<div class="button"><span>↓</span></div>
<section class="bg-dark angled-div"></section>
Question
How do I position my div so that it is halfway over the angled div and remains exactly half way over the angled div no matter the screen width?
You can have a near perfect centering if you can change your markup:
Change the skewed pseudo element to a span and position the button inside the span so that the button is also skewed.
Center the button using the below and also make a reverse skew:
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%) skew(3deg);
transform-origin: left bottom;
Now make the contents of the button vertical using transform: rotate(3deg) on the button span element.
Now you can change the value of top (say 50px) to push the button inside the skewed section as much as needed.
See demo below:
*,
*:before,
*:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
section {
width: 100%;
min-height: 400px;
}
.bg-hero {
background: #00C1F7;
position: relative;
}
.bg-dark {
background: #003342;
position: relative;
}
.angled-div > span{
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
transform-origin: left bottom;
transform: skewY(-3deg);
z-index: 1;
}
.button {
height: 150px;
width: 150px;
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, -100%) skew(3deg);
background: #003342;
border-radius: 150px;
z-index: 2;
transform-origin: left bottom;
}
.button span {
width: 100%;
text-align: center;
color: white;
position: absolute;
top: 20px;
font-size: 62px;
transform: rotate(3deg);
}
.button:hover {
cursor: pointer;
background: #004472;
}
<section class="bg-hero"></section>
<section class="bg-dark angled-div">
<span>
<div class="button"><span>↓</span></div>
</span>
</section>
I'm trying to add a point/triangle to my div with a background image but am struggling with how to create enough empty space.
Here's what I'm going for:
Here's what I have so far:
<div class="bg"></div>
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
I tried following this Stack Overflow question, but the approach in the top answer creates borders that come from the ends of the rectangular div.
Could achieve your design using another div. Hope you'll like it :)
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
.helper {
position: absolute;
height: 50px;
top: 0;
left: 0;
right: 0;
}
.helper:before, .helper:after {
content: "";
background: white;
position: absolute;
top: 0;
bottom: 0;
width: calc(50% - 50px);
}
.helper:before {left: 0;}
.helper:after {right: 0;}
<div class="bg">
<div class="helper"></div>
</div>
You can achieve what you want by using pseudo element and skew them to get the shape border
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
overflow: hidden;
}
.bg:before {
content: '';
background: #fff;
position: absolute;
top: 0;
right: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(-40deg);
}
.bg:after {
content: '';
background: #fff;
position: absolute;
top: 0%;
left: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(40deg);
}
<div class="bg"></div>
I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>