I'm using Bootstrap.
I need to achieve this result :
For that I started doing this :
<body>
<div id="diagonal-bg"></div>
</body>
#diagonal-bg{
position: absolute;
left: -800px;
width: 200%;
min-height: 700px;
background-image: -webkit-linear-gradient(118deg, #fff 35%, #8aa8ec 35%);
}
It works almost because as soon as I resize my window here is what I get :
How can I have distances A and B to be always the same across different size of screen/window, to make it responsive.
Thanks
You can find the solution below interested for
Background color diagonal split responsive
.shape {
width:400px;
margin:0 auto;
}
.top {
height:0;
border-width:150px 400px 0px 0px;
border-style:solid;
border-color:#d71f55 transparent #d71f55 transparent;
}
.bottom {
height: 50px;
background-color:#d71f55;
}
/* Support transparent border colors in IE6. */
* html .top {
filter:chroma(color=#123456);
border-top-color:#123456;
border-left-color:#123456;
}
<div class="shape">
<div class="bottom"></div>
<div class="top"></div>
</div>
I've resolved my issue :
<div class="background">
<div class="top"></div>
<div class="bottom"></div>
</div>
.background {
position: absolute;
width: 100%;
margin: 0 auto;
}
.top {
height: 100px;
background-color: #23d6c5;
}
.bottom {
width: 100%;
height: 500px;
background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%);
}
body{
background-color: white;
}
.background {
position: absolute;
width: 100%;
margin: 0 auto;
}
.top {
height: 100px;
background-color: #2f3441;
}
.bottom {
width: 100%;
height: 500px;
background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%);
}
<div class="background">
<div class="top"></div>
<div class="bottom"></div>
</div>
Related
According to the size of the div, I want to set the background-position-x and the background-size.
Using only CSS without JS or JQuery, I use min() which works:
.test {
transition: all 0.5s;
background-image: url(./my-asset.svg);
background-repeat: no-repeat;
background-position-x: min(-50px, -100%);
background-position-y: center;
background-size: min(50px, 100%) 100%;
}
This works properly but only on recent browsers, but I have a Firefox target to v.68 and it is not compatible.
What could be the alternative without using JS or JQuery and only CSS ?
I reproduce what I would like to have in output using min(). Hover the red part to make it work:
body,
html {
height: 100%;
width: 100%;
margin: 5px;
}
#main {
display: flex;
flex-direction: row;
background-color: cyan;
}
.use-px {
width: 300px;
height: 300px;
border: solid 3px black;
}
.use-percentage {
margin-left: 200px;
width: 100px;
height: 300px;
border: solid 3px black;
}
.left-over-image {
width: 25%;
height: 100%;
transition: all 1s;
background-color: red;
background-image: url(https://www.w3schools.com/images/w3schools_green.jpg);
background-repeat: no-repeat;
background-position-x: min(-50px, -100%);
background-position-y: center;
background-size: min(50px, 100%) 100%;
}
.left-over-image:hover {
background-position: left;
}
<html>
<body>
<div id="main">
<div class="use-px">
<!-- It will use 50px, because 25% of 300px is 75px. -->
<div class="left-over-image"></div>
</div>
<div class="use-percentage">
<!-- It will use 100%, because 25% of 100px is 25px. -->
<div class="left-over-image"></div>
</div>
</div>
</body>
</html>
You can consider a trick using pseudo element.
Resize both examples to see that they behave the same:
.box {
height:100px;
width:100px;
border:2px solid;
resize:both;
overflow:hidden;
background:linear-gradient(red,blue) 0/50px 50px no-repeat;
background-position-x: min(4em, 100%);
}
.alt {
height:100px;
width:100px;
border:2px solid;
resize:both;
overflow:hidden;
position:relative;
z-index:0;
}
.alt::before {
content:"";
position:absolute;
background:inherit;
background:linear-gradient(red,blue) 0/50px 50px no-repeat;
background-position-x:100%;
max-width:calc(4em + 50px); /* 4em + width of background */
width:100%;
top:0;
bottom:0;
left:0;
z-index:-1;
}
<div class="box">
</div>
<div class="alt">
</div>
UPDATE
Based on your new code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#main {
display: flex;
flex-direction: row;
background-color: cyan;
}
.use-px {
width: 300px;
height: 300px;
border: solid 1px black;
}
.use-percentage {
width: 100px;
height: 300px;
border: solid 1px black;
}
.left-over-image {
width: 25%;
height: 100%;
background-color: red;
position:relative;
overflow:hidden;
}
.left-over-image::before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
max-width:50px;
background-image: url(https://www.w3schools.com/images/w3schools_green.jpg);
background-size: 100% 100%;
transform:translateX(-100%);
transition: all 1s;
}
.left-over-image:hover::before {
transform:translateX(0);
}
<div id="main">
<div class="use-px">
<!-- It will use 50px, because 25% of 300px is 75px. -->
<div class="left-over-image"></div>
</div>
<div class="use-percentage">
<!-- It will use 100%, because 25% of 100px is 25px. -->
<div class="left-over-image"></div>
</div>
</div>
I created a triangle like so using css:
.box {
width: 0;
height: 0;
border-style: solid;
border-width: 540px 964px 540px 0;
border-color: transparent #007bff transparent transparent;
}
But I am trying to make my triangle look like this:
My question is how do I make the top and bottom more edge to edge?
You could use :after pseudo element to create one square and then use rotate and translate transforms.
.element {
display: inline-block;
background: lightgreen;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.two {
margin-left: 30px;
width: 300px;
height: 300px;
}
.element:after {
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #30373F;
transform: rotate(45deg) translate(10%, -20%);
}
<div class="element"></div>
<div class="element two"></div>
You can easily do this with gradient:
.box {
width:200px;
height:200px;
background:
linear-gradient(red,red) right/30% 100%,
linear-gradient(to top left,red 49.8%,transparent 50%) top left/70% 50%,
linear-gradient(to bottom left,red 49.8%,transparent 50%) bottom left/70% 50%,
url(https://picsum.photos/600/600?image=1069) center/cover;
background-repeat:no-repeat;
}
<div class="box">
</div>
I'm trying to add a hover effect for a menu -
It should be pretty simple but I haven't found any scss or css work arounds yet... Below is an image that shows specifically what I'm talking about.
A simple linear-gradient will do it:
.container {
background:grey;
padding:10px;
}
.nav {
display: inline-block;
padding: 10px;
color: #fff;
}
.nav:hover {
background: linear-gradient(to bottom right, transparent 50%, red 51%);
}
<div class="container">
<div class="nav">TEXT</div>
<div class="nav">long TEXT</div>
<div class="nav">A</div>
<div class="nav">BBBBBBBBBBB</div>
</div>
You can use clip-path to shape the triangle, although browser support Eh.
button {
background: #112b1bb8;
border: 1px solid black;
padding: 10px 40px;
position: relative;
}
button:hover:before {
content: '';
width: 100%;
height: 100%;
background: grey;
position: absolute;
top: 0;
left: 0;
z-index: -1;
clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}
<button>Brand</button>
<button>Link Link</button>
<button>O</button>
There have been several questions regarding some kind of transparent border but not what I am looking for, I think.
It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border?
So you have a continuous background and each item on top of it "cuts out" some part of it.
A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.
If not, what would be the way to achieve a responsive design like that?
Sorry, I don't know any other way to explain it. Thank you.
See example/fiddle here: jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>
<div id="main_footer">
<div id="icons"></div>
</div>
My thought process
The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.
Example:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}
<div class="bg">
<div class="border">black border</div>
<div class="no-border">"transparent" border</div>
</div>
Solution:
The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
<div class="container">
<div class="icon">
<img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
</div>
<div class="bg">
<img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
</div>
</div>
you could create a image with transparent background and use that as a border-image.
.background {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background-color: #fd1dfa;
z-index: 1 !important;
}
.background:after {
content: "";
display: table;
clear: both;
}
hr {
border: 10px solid white;
position: relative;
top: 100px;
z-index: 5 !important;
}
.center {
position: relative;
width: 50px;
height: 50px;
background-color: #fd1dfa;
color: #ffffff;
padding: 10px;
z-index: 10 !important;
}
.border {
position: relative;
z-index: 8 !important;
margin: 30px;
width: 70px;
height: 70px;
float: left;
background: white;
border: 10px solid transparent;
border-image:
}
<div class="background">
<hr>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
</div>
I'm trying to make the bottom of an image pointed. I've tried to get this effect by producing two triangles at the bottom. They must be responsive. and after searching all over the internet with a lot of examples that don't work for my requirement this is the best so far I've managed to produce.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.pointer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.triangleWrapper {
width: 50%;
height: 50px;
float: left;
}
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 50%, transparent 50%);
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 50%, transparent 50%)
}
<div class="image">
<img src="http://placekitten.com/1410/500">
<div class="pointer">
<div class="triangleWrapper">
<div style="height: 100%;" class="lefttriangle"></div>
</div>
<div class="triangleWrapper">
<div style="height: 100%;" class="righttriangle"></div>
</div>
</div>
</div>
CodePen Demo
It works exactly how I want it to as it is responsive without the need for media queries. BUT it has a jagged edge on the triangle line that isn't 90deg.
How do I get this to produce a smooth line in most if not all modern browsers? I'm not asking for backward compatibility.
Any help is greatly appreciated!
Unfortunately, this always happens when we use angled linear-gradient images and currently the only way to overcome this behavior seems to be to avoid hard-stopping of the colors (that is, don't make the stop point of one color as the start point of the next). Making the second color start a little farther away from the stop point of the first color would kind of create a blurred area and make it look more smoother. This is still not 100% perfect but is better than having jagged edges.
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.pointer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.triangleWrapper {
width: 50%;
height: 50px;
float: left;
}
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}
<div class="image">
<img src="http://placekitten.com/1410/500">
<div class="pointer">
<div class="triangleWrapper">
<div style="height: 100%;" class="lefttriangle"></div>
</div>
<div class="triangleWrapper">
<div style="height: 100%;" class="righttriangle"></div>
</div>
</div>
</div>
Alternate Implementations:
Clip Paths: You can use clip-path feature also to produce a similar effect. The advantage of using clip-path is that it is both responsive and also produces a transparent cut. The SVG based clip-path has better browser support than the CSS version. This is not yet supported in IE though.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.css-clip {
-webkit-clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
}
.svg-clip {
-webkit-clip-path: url(#clipper);
-moz-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<!-- CSS Clip-path - Lower browser support -->
<div class="image css-clip">
<img src="http://placekitten.com/1410/500">
</div>
<!-- SVG Clip-path - Better browser support -->
<svg width="0" height="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="clipper">
<path d="M0,0 0,0.9 0.5,1 1,0.9 1,0z" />
</clipPath>
</defs>
</svg>
<div class="image svg-clip">
<img src="http://placekitten.com/1410/500">
</div>
Using CSS Transform: You could also try using the approach mentioned in this answer. It achieves a pointed effect on the left side but it should be easy to adapt it to create a pointed effect on the bottom side.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.top-container,
.bottom-container {
position: absolute;
bottom: 0px;
height: 100%;
width: 50%;
overflow: hidden;
backface-visibility: hidden;
}
.top-container {
left: 0px;
transform-origin: right bottom;
transform: skewY(10deg);
}
.bottom-container {
right: 0px;
transform-origin: left bottom;
transform: skewY(-10deg);
background-position: 0% 100%;
}
.top-container:after,
.bottom-container:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
bottom: -62px; /* tan(10) * (width/2) / 2 */
background: url(http://placekitten.com/1410/500);
background-size: 200% 100%;
}
.top-container:after {
left: 0px;
transform: skewY(-10deg);
}
.bottom-container:after {
right: 0px;
transform: skewY(10deg);
background-position: 100% 0%;
}
<div class="image">
<div class='top-container'></div>
<div class='bottom-container'></div>
</div>
Just found an insanely good solution on codepen using calc(50% - 1px)
https://codepen.io/hellonico/pen/xEYXmL
background: linear-gradient(7deg, currentColor calc(50% - 1px), transparent 50%);
No blur whatsoever, just a smooth edge
EDIT: .. apparently not in Safari?..