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%);
Related
I have this:
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 50%, transparent 50%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
I found the pen online, and want to adjust it for my own usage, however, cannot figure out a few things.
I want to move the blue box lower, so it is not as high, but still keep the same shape. So I tried background position, as one would, and it doesn't change anything. I'm relatively an amateur in css so it is probably a silly question, but a question none the less! Appreciate the help
It's because that shape is made with linear gradient as background, so you just need to adjust gradient percentages:
From
background: linear-gradient(25deg, yellow 50%, transparent 50%);
to
background: linear-gradient(25deg, yellow 20%, transparent 20%);
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 20%, transparent 20%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
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>
I have this design
How can I make the blue curved background on top of the image (I need the transparency as well) ?
I started it with a different backgournd but I don't know where to go from there. Any help will be really appreciated.
.bg {
background-image:url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
max-width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
}
.bluebg {
background-color: blue;
position: absolute;
}
<div class="bg">
<div class="bluebg">
</div>
</div>
https://jsfiddle.net/0rsLxtw5/7/
I hope the below-given snippet helps!
.bg {
background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
height: 200px;
background-size: cover;
background-position: center;
overflow: hidden;
}
.bluebg {
background: rgba(135, 206, 235, 0.5);
height: 140%;
width: 90%;
-webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
}
<div class="bg">
<div class="bluebg"></div>
</div>
I changed your HTML like the parent as child and child as parent.
.bg {
background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
max-width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
-webkit-clip-path: circle(50% at 98% 50%);
clip-path: circle(50% at 98% 50%);
}
.bluebg {
background-color: blue;
position: absolute;
height: 200px;
width: 100%;
}
<div class="bluebg">
<div class="bg">
</div>
</div>
My code - Fiddle
body{
background: url('http://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
div{
width: 150px;
height: 150px;
background-image: radial-gradient(circle at 0 0, transparent 28px, tomato 28px);
}
<div></div>
How to remove jaggies?
Thank you, I will be glad to any help!
Take a different approach with a large box-shadow on a round element:
body {
background: url('https://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
.bitten {
height: 150px;
overflow: hidden;
position: relative;
width: 150px;
}
.bitten::before {
border-bottom-right-radius: 100%;
box-shadow: 0 0 0 1000px tomato;
content: '';
height: 28px;
position: absolute;
width: 28px;
z-index: -1;
}
<div class="bitten"></div>
In some browsers, you can prevent jaggies by not having sharp edges to your gradient. So rather than transparent 28px, tomato 28px, you make the transition between the colors a bit smoother, say by 1px.
body{
background: url('https://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
div{
width: 150px;
height: 150px;
background-image: radial-gradient(circle at 0 0, rgba(255,99,71,0) 28px, rgba(255,99,71,255) 30px);
}
<div></div>
But this doesn't work everywhere. For a more solid approach, see the other answer.
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