How I can add like USA flag right top corner? It should be responsive.
Its similar like paper folded corner but in folded part is USA flag.
And flag in corner should be clickable
#triangle {
right: 0;
width: 0;
height: 0;
background-image: url('https://images-na.ssl-images-amazon.com/images/I/612hQjoIpCL._AC_SL1446_.jpg');
border-top: 100px solid ;
border-left: 100px solid transparent;
position: absolute;
}
<a href="#" class="flagCorner" id="triangle">
This didnt really work for me. I see ribbons everywhere but didnt work for my flag.
Do it differently using clip-path
#triangle {
background-image: url('https://images-na.ssl-images-amazon.com/images/I/612hQjoIpCL._AC_SL1446_.jpg');
background-size: cover;
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
And with a shadow you can consider an extra wrapper:
#triangle a{
background-image: url('https://images-na.ssl-images-amazon.com/images/I/612hQjoIpCL._AC_SL1446_.jpg');
background-size: cover;
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
#triangle {
filter:drop-shadow(0 0 5px red);
}
<div id="triangle"><a href="#" class="flagCorner" ></a></div>
Related
I want to stack two colors one on top of the other. I did it by creating and sovrapposing two divs, having the one on the top with an opacity of 60%.
I wonder if there's a simpler way requiring only one div with two colors or maybe just one color that is a mix of the two.
I post here my code, If you notice any bad practice let me know please. I am eager to improve my skills.
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
/* ~~~~~~~~~~SKY~~~~~~~~~~ */
#sky {
position: relative;
z-index: -100;
width: 100vw;
height: 100vh;
background-image: linear-gradient( to top, midnightblue, black);
}
/* ~~~~~~~~~~MOON~~~~~~~~~~ */
.moon {
position: absolute;
top: 3%;
right: 0%;
width: 200px;
height: 200px;
border-radius: 50%;
}
#dark-moon {
background-color: silver;
}
#light-moon {
background-color: goldenrod;
background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
opacity: 60%;
}
/* ~~~~~~~~~~SEA~~~~~~~~~~ */
#sea {
position: absolute;
bottom: 0%;
width: 100vw;
height: 25vh;
background-color: #48B;
}
<div id="sky">
<div id="dark-moon" class="moon"></div>
<div id="light-moon" class="moon"></div>
</div>
<div id="sea"></div>
As you can see there's a golden moon over a silver one. How can I get the same result having only one moon?
You can do it with 0 elements using pseudo element and multiple backgrounds:
html {
min-height: 100%;
background: linear-gradient( to top, midnightblue, black);
}
html::before {
content:"";
position: absolute;
top: 3%;
right: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(rgba(192,192,192,0.4) 0 0),
radial-gradient(dimgrey 20%, transparent 16%),
radial-gradient(dimgrey 15%, transparent 16%) 30px 30px,
goldenrod;
background-size: 60px 60px;
}
html::after {
content:"";
position: absolute;
bottom: 0;
left:0;
right:0;
height: 25vh;
background: #48B;
}
Another fancy idea to optimize the code more:
html {
min-height: 100%;
background:
linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
linear-gradient(black,midnightblue);
}
html::before {
content:"";
position: absolute;
top: 3%;
right: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
linear-gradient(rgba(192,192,192,0.4) 0 0),
radial-gradient(dimgrey 20%, transparent 16%) 0 0 /60px 60px,
radial-gradient(dimgrey 15%, transparent 16%) 30px 30px/60px 60px,
goldenrod;
}
Another option that only involves setting one background property would be to "stretch and displace" a linear-gradient in such a way that the result is a single color.
--base-col and --blend-col defines the gradient, --blend-amount sets the color mix, and --stretch-factor determines how much stretch is applied to the gradient:
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
/* ~~~~~~~~~~SKY~~~~~~~~~~ */
#sky {
position: relative;
z-index: -100;
width: 100vw;
height: 100vh;
background-image: linear-gradient( to top, midnightblue, black);
}
/* ~~~~~~~~~~MOON~~~~~~~~~~ */
.moon {
position: absolute;
top: 3%;
right: 0%;
width: 200px;
height: 200px;
border-radius: 50%;
}
#dark-moon {
--blend-amount: 60%;
--base-col: silver;
--blend-col: goldenrod;
--stretch-factor: 100;
background: linear-gradient(
var(--base-col) calc(( 0% - var(--blend-amount)) * var(--stretch-factor)),
var(--blend-col) calc((100% - var(--blend-amount)) * var(--stretch-factor))
);
}
#light-moon {
background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
/* ~~~~~~~~~~SEA~~~~~~~~~~ */
#sea {
position: absolute;
bottom: 0%;
width: 100vw;
height: 25vh;
background-color: #48B;
}
<div id="sky">
<div id="dark-moon" class="moon"></div>
<div id="light-moon" class="moon"></div>
</div>
<div id="sea"></div>
You can try to get the hex code for the mixed color first using online color mixer tool such as this one https://colordesigner.io/color-mixer. After that you can use the result color in one div.
I have a simple 100vw-100vh page with 3 images in the background for mobile, and 5 in a different set-up for larger viewports.
The way I have it set-up so far:
3 (or 5) div containers, clipped as a polygon in CSS
the images set as background-image of each container in CSS, with background-size: cover.
This works fine to display the images, but when I try to add borders to the containers the clipped sides won't get the border, only the "original" bits would (as in, of the sides of the rectangles before clipping).
Is there a way to add them all around?
Note: I have played with background-origin without result. The whole page is set-up with box-sizing: border-box; but it does not seem to impact the result either.
Codepen of my code, for the mobile version (3 images) below.
Many thanks for your help!
PS: I have seen a couple of posts related to the topic to an extent, but not with the background image set-up the same way, and as they were all a bit old I thought wider browser support may help #hope. Sorry for any redundancy I would have missed!
https://codepen.io/aguafresca/pen/abNvyXO?editors=1100
<body> <main>
<welcome-page>
<contacto-link>
<p>contact details</p>
</contacto-link>
</welcome-page>
<background-container id="cont1" class=""></background-container>
<background-container id="cont2" class=""></background-container>
<background-container id="cont3"></background-container>
</main> </body>
CSS:
/* general set-up */
html {
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
*, *:before, *:after, a, main, body {
box-sizing: inherit;
margin: 0;
padding: 0;
}
/* setting-up the background */
welcome-page {
z-index: 2;
height: 100vh;
width: 100vw;
position: absolute;
top:0;
left:0;
background-color: rgba(255, 255, 255, 0.3);
}
background-container {
display: block;
z-index: 1;
position: absolute;
background-color: dimgray;
background-size: cover;
border: red solid 3px;
background-origin: content-box;
}
#cont1 {
top: 0;
left: 0;
height: 60vh;
width: 70vw;
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://images.unsplash.com/photo-1596072181334-1adc75da7717?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
}
#cont2 {
top: 0;
left: 0;
height: 100vh;
width: 100vw;
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://images.unsplash.com/photo-1595680337986-ce4862b497b9?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
}
#cont3 {
bottom: 0;
right: 0;
height: 60vh;
width: 70vw;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://images.unsplash.com/photo-1595035848637-29bd22af4faf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
border-color: green;
z-index:10;
}
/* footer format */
contacto-link {
display: block;
position: fixed;
bottom: 0;
height: 5vh;
width:100vw;
line-height: 5vh;
background-color: rgba(255, 255, 255, 0.8);
color: dimgrey;
}
Using an extra wrapper you can consider drop-shadow to simulate the borders.
Here is an example where I will not really and an extra wrapper but I will use pseudo element for the image:
body {
margin: 3px;
height: calc(100vh - 6px);
position: relative;
}
.background-container {
z-index: 1;
position: absolute;
filter:
drop-shadow(0px 3px 0px red)
drop-shadow(3px 0px 0px red)
drop-shadow(0px -3px 0px red)
drop-shadow(-3px 0px 0px red)
}
.background-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
#cont1 {
top: 0;
left: 0;
height: 60%;
width: 70%;
}
#cont1::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://picsum.photos/id/10/800/800");
}
#cont2 {
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:2;
}
#cont2::before {
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://picsum.photos/id/1011/800/800");
}
#cont3 {
bottom: 0;
right: 0;
height: 60%;
width: 70%;
}
#cont3::before {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://picsum.photos/id/1074/800/800");
}
<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>
And with different coloration:
body {
margin: 3px;
height: calc(100vh - 6px);
position: relative;
}
.background-container {
z-index: 1;
position: absolute;
filter:
drop-shadow(0px 3px 0px var(--c,red))
drop-shadow(3px 0px 0px var(--c,red))
drop-shadow(0px -3px 0px var(--c,red))
drop-shadow(-3px 0px 0px var(--c,red))
}
.background-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
#cont1 {
top: 0;
left: 0;
height: 60%;
width: 70%;
--c:blue;
}
#cont1::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://picsum.photos/id/10/800/800");
}
#cont2 {
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:2;
}
#cont2::before {
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://picsum.photos/id/1011/800/800");
}
#cont3 {
bottom: 0;
right: 0;
height: 60%;
width: 70%;
--c:yellow;
}
#cont3::before {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://picsum.photos/id/1074/800/800");
}
<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>
I am trying to do a banner for my website, a bit differently.
I want bottom border, to be kind of "arrow down" looking
Something like this: JS FIDDLE
.indexBanner {
background-image: url('https://i.stack.imgur.com/dFUnt.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-color: #404040;
height: 500px;
position: relative;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}
<div class="indexBanner"></div>
But currently I am using clip-path, which is not supported by Firefox and IE.
And also you can see that the "arrow shaped" border is a bit messy.
I've also tried transform: skew in which case the result was more of a "chat bubble" kind of effect.
Is there any way to do this, because I am all out of ideas.
https://jsfiddle.net/glebkema/h18w341m/
.indexBanner {
background-image: url('http://nauci.se/Flipo/assets/images/study.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-color: #404040;
height: 500px;
position: relative;
overflow-x: hidden;
}
.indexBanner:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 50vw solid white;
border-right: 50vw solid white;
border-top: 15vw solid transparent;
}
<div class="indexBanner">
</div>
I have tried changing the arrow-border to look less messy.
https://jsfiddle.net/night11/b7ch05Ln/ - updated
-webkit-clip-path: polygon(0 1%, 100% 0, 100% 60%, 50% 100%, 0 60%);
I have the following HTML + CSS:
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
<div class="item">
<div class="gradient">
</div>
</div>
It's rendered in the browser properly. But on mobile (see the attached screenshot) there's a one thick line across the gradient, I have no idea why is that.
Here's also I js fiddle: https://jsfiddle.net/tcxka242/1/
First I thought that is repeated vertically as well, but the inspector says that the rule I've set: background: url(...) repeat-x center bottom; is expanded to :
background-image: url("http://i.imgur.com/oSpOTeK.png");
background-position-x: 50%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
That's on Android Phone with Google Chrome.
Sorry but i cannot properly verify this , but i have an idea for you .
.item .gradient {
width:100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
outline: 0;
border: none;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
As you can see i have set the outline to 0 and the border to none . There's a possibility that there is an outline from the div or a hidden border .
Specifying border-top: 0px; and box-shadow: none; will work for you
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
box-shadow: none;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
border-top: 0px;
}
I think this is caused on screens with high DPI. Therefore I am providing a CSS-only alternative.
https://jsfiddle.net/tcxka242/6/
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);
}
Presently I am working on different types of triangle shapes by using border-bottom, border-top, border-left, border-right. Up to this I am getting OK with background color.
But I need to get this shapes by placing background images(without cutting any background images). I tried to do this by using border but no luck.
Example for this
You have 2 ways to get this effect:
The first one is supported only in WebKit, and you will need only one div.
The second one is supported in all modern browsers, but your HTML is less clean, and needs a helper div.
In the code below, test is the first example and test2 and inner2 the second example:
.test {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
display: inline-block;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
-moz-clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
}
.test2 {
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
overflow: hidden;
display: inline-block;
}
.inner2 {
position: absolute;
width: 140%;
height: 100%;
left: 0px;
top: 0px;
-webkit-transform: rotate(37deg);
-webkit-transform-origin: top left;
transform: rotate(37deg);
transform-origin: top left;
overflow: hidden;
}
.inner2:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-transform: rotate(-37deg);
-webkit-transform-origin: top left;
transform: rotate(-37deg);
transform-origin: top left;
}
<div class="test"></div>
<div class="test2"><div class="inner2"></div></div>
JSFiddle
The first example uses clipping to get the image cut in triangle shape (only the front image, the other remains rectangular).
The second example uses overflow hidden and a rotation to get the triangular shape. Then, you need the opposite rotation to get the image straight.
In the first example, you can do almost whatever shape you want. For instance,
-webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%);
gives you this:
.test {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
display: inline-block;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%);
}
<div class="test"></div>
JSFiddle