Related
I have a div with background-image: linear-gradient( to bottom, red, blue);
but I want the to bottom to be to center but it does not work.
wright, now it looks like this
I want it to look like this
Does anyone know how to do this pleas help me?
What you are showing is a classic border:
.box {
border:40px solid blue;
height:50px;
width:50px;
background:red;
}
<div class="box"></div>
But I suspect you want a color fading so what you want is a radial-gradient
.box {
height:200px;
width:200px;
background:radial-gradient(farthest-side,red,blue);
}
<div class="box"></div>
Or maybe like below:
.box {
height: 200px;
width: 200px;
background: linear-gradient(to right, blue, red, blue);
position: relative;
}
.box::before {
content: "";
display: block;
height: 100%;
background: linear-gradient(blue, red, blue);
clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
}
<div class="box"></div>
Or like this:
.box {
height: 200px;
width: 200px;
background:
linear-gradient(to top right , red, blue) top right,
linear-gradient(to top left , red, blue) top left ,
linear-gradient(to bottom left , red, blue) bottom left,
linear-gradient(to bottom right, red, blue) bottom right;
background-size:50% 50%;
background-repeat:no-repeat;
}
<div class="box"></div>
Also using box-shadow
.box {
height: 200px;
width: 200px;
background: red;
box-shadow: 0 0 50px 35px blue inset;
}
<div class="box"></div>
What you can do is to utilize multiple background gradients:
.item {
--outerColor: blue;
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
background-image: linear-gradient(to bottom, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%), linear-gradient(to right, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%);
}
<div class="item"></div>
Here's how it works:
Step 1: Make pure red background:
.item {
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
}
<div class="item"></div>
Step 2: Add horizontal stripe
.item {
--outerColor: blue;
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
background-image: linear-gradient(to bottom, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%);
}
<div class="item"></div>
Step 3: Add vertical stripe
.item {
--outerColor: blue;
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
background-image: linear-gradient(to bottom, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%), linear-gradient(to right, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%);
}
<div class="item"></div>
I think you want like this.
#grad1 {
height: 200px;
width: 200px;
background:
linear-gradient(90deg, blue, rgba(0,255,0,0) 30%),
linear-gradient(180deg, blue, rgba(0,0,255,0) 30%),
linear-gradient(0deg, blue, rgba(0,255,0,0) 30%),
linear-gradient(270deg, blue, rgba(0,0,255,0) 30%),
linear-gradient(0deg, blue, red, red 50%),
linear-gradient(90deg, blue, red, red 50%),
linear-gradient(180deg, blue, red, red 50%),
linear-gradient(270deg, blue, red, red 50%);
}
<div id="grad1"></div>
please have a look at my exampleI have added background color, and now i want to slice some point and must be with background transparent like i added
.single_cat_list_in .meta:before {
content: "";
width: 20px;
height: 20px;
background: #ffffff !important;
position: absolute;
right: -35px;
bottom: -10px;
border-radius: 50%;
border-left: 1px solid rgba(0, 0, 0, 0.5);
}
https://prnt.sc/pi94k5
You can use multiple linear and radial gradients to create the rounded corners (taken from this article):
.item {
height: 100px;
background:
linear-gradient(45deg, transparent 10px, gold 0) top left,
linear-gradient(315deg, transparent 10px, gold 0) top right,
linear-gradient(225deg, transparent 10px, white 0) bottom right,
linear-gradient(135deg, transparent 10px, white 0) bottom left;
background-image:
radial-gradient(circle at 0 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 0, transparent 14px, white 15px),
radial-gradient(circle at 0 0, transparent 14px, white 15px);
background-size: 50% 50%;
background-repeat: no-repeat;
}
body {
background: silver;
}
<div class="item"></div>
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
background-size: 50% 50%;
background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
I'm trying to build a circle with 8 colors, could you please help me to tweak the code above?
Use following css:
div {
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
}
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-size: 50% 50%;
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, yellow 0%, yellow 50%, blue 50%, blue 100%), linear-gradient(135deg, gray 0%, gray 50%, green 50%, green 100%), linear-gradient(-45deg, black 0%, black 50%, #b2dba1 50%, #b2dba1 100%) , linear-gradient(-135deg, red 0%, red 50%, orange 50%, orange 100%);
background-size: 50% 50%;
background-position: 0% 0%,0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
Or with something like this.
Here you can add as many slices you want.
But its a little bit longer than the other solutions.
If you want to read more about this here is the right place.
.pie {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 50px, 100px, 0px);
}
.hold {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 100px, 100px, 50px);
}
#pieSlice1 .pie {
z-index:8;
background-color: #1b458b;
-webkit-transform:rotate(50deg);
-moz-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
#pieSlice2 .pie {
z-index:7;
background-color: red;
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
transform:rotate(100deg);
}
<div id="pieSlice1" class="hold"><div class="pie"></div></div>
<div id="pieSlice2" class="hold"><div class="pie"></div></div>
I need to present some data. Each block of data needs a country flag. I would like to display the country flag, using a nice little hanging banner, like this:
This image is edited in paint, and the example I've used, comes from this page
This link right here, shows how to display flags of Europe++ in pure CSS. In my system, I only need Nordic flags, which are all represented by a cross.
From the codepen example:
#function cross($back, $main, $detail: $back){
#return linear-gradient(90deg, transparent 28%, $main 28%, $main 34%, transparent 34%),
linear-gradient(transparent 42%, $detail 42%, $detail 46%, $main 46%, $main 58%, $detail 58%, $detail 62%, transparent 62%),
linear-gradient(90deg, $back 25%, $detail 25%, $detail 28%, $main 28%, $main 34%, $detail 34%, $detail 37%, $back 37%);
}
If I derive this (and rotate it 90deg to fit my preferred orientation, I can get something like this:
HTML:
<div class="norway"></div>
CSS:
.norway{
background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%),
linear-gradient(90deg, transparent 42%, white 42%, white 46%, blue 46%,
blue 58%, white 58%, white 62%, transparent 62%),
linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%,
white 34%, white 37%, red 37%);
height: 600px;
width: 400px;
}
The hanging banner example however, is not really displaying the element itself, merely its border. I like the split in the bottom, So I would like to be able to set the linear gradients on the different border sides individually, or somehow otherwise solve the problem. I have tried a few approaches, but I can't seem to make the gradients work on individual border sides.
Does anyone know how I can display my flags as split end ribbons, using only CSS?
By the way, the Czech Republic is easy...
UPDATE:
I was able to render a Norwegian version, but I had to make two elements. One displaying the flag in the background of an element, and another element over it, displaying only the bottom border, in the same color as the block background. It seems like a pretty fragile solution, though...
https://jsfiddle.net/azjctc1y/
Note: After looking at Joseph's answer, I'd suggest you to go with that but this is another way.
Instead of using border to create the flag, we can use background with linear-gradient images like in the below snippet.
/* Latest compiled and minified CSS included as External Resource*/
html {
margin: 20px;
}
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.test-container {
background-color: lightgrey;
border: 1px solid black;
position: relative;
padding: 10px;
margin: 10px;
min-height: 100px;
}
.close-ribbon {
position: absolute;
top: 0;
right: 1em;
z-index: 1;
color: #eee;
font-size: 2em;
}
.close-ribbon:before {
content: "";
font-size: 0.5em;
position: absolute;
border-style: solid;
border-color: transparent transparent #B71C1C transparent;
top: -1em;
right: 3em;
border-width: 0 0 1em 0.7em;
z-index: -1;
}
.close-ribbon:after {
position: absolute;
content: "";
top: -1em;
right: 0;
height: 5em;
width: 3em;
background: linear-gradient(to bottom right, transparent 48%, lightgrey 52%), linear-gradient(to bottom left, transparent 48%, lightgrey 52%), linear-gradient(180deg, transparent 38%, blue 38%, blue 44%, transparent 44%), linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 56%, white 55%, white 62%, transparent 62%), linear-gradient(180deg, red 35%, white 35%, white 38%, blue 38%, blue 44%, white 44%, white 47%, red 47%), linear-gradient(to bottom right, red 50%, lightgrey 55%), linear-gradient(to top right, lightgrey 45%, red 50%);
background-size: 1.6em 1.4em, 1.45em 1.4em, 3em 4em, 3em 4em, 3em 4em, 1.2em 1.1em, 1.2em 1.1em;
background-position: 0% 100%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 100%, 100% 100%;
background-repeat: no-repeat;
font-size: 0.5em;
z-index: -1;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="test-container">
<a class="close-ribbon"></a>
Czech Republic is easy...
</div>
</div>
</div>
</div>
Original Answer:
It is not 100% like the image provided in question or the ouput of your fiddle because the blue cross doesn't have the small triangular cut because I was trying create a cut that was transparent (so that you can use it on top of an element with any background). But if it is always going to be a grey background then that can also be done.
The below is the code that I have added:
.close-ribbon:after {
position: absolute;
content: "";
top: -1em;
right: 0;
height: 5em;
width: 3em;
background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%), linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 58%, white 58%, white 62%, transparent 62%), linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, white 34%, white 37%, red 37%), linear-gradient(to bottom right, red 50%, transparent 55%), linear-gradient(to top right, transparent 45%, red 50%);
background-size: 3em 4em, 3em 4em, 3em 4em, 1.25em 1em, 1.2em 1em;
background-position: 0% 0%, 0% 0%, 0% 0%, 0% 100%, 100% 100%;
background-repeat: no-repeat;
/* other styles */
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.test-container {
background-color: lightgrey;
border: 1px solid black;
position: relative;
padding: 10px;
margin: 10px;
min-height: 100px;
}
.close-ribbon {
position: absolute;
top: 0;
right: 1em;
z-index: 1;
color: #eee;
font-size: 2em;
}
.close-ribbon:before {
content: "";
font-size: 0.5em;
position: absolute;
border-style: solid;
border-color: transparent transparent #B71C1C transparent;
top: -1em;
right: 3em;
border-width: 0 0 1em 0.7em;
z-index: -1;
}
.close-ribbon:after {
position: absolute;
content: "";
top: -1em;
right: 0;
height: 5em;
width: 3em;
background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%), linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 58%, white 58%, white 62%, transparent 62%), linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, white 34%, white 37%, red 37%), linear-gradient(to bottom right, red 50%, transparent 55%), linear-gradient(to top right, transparent 45%, red 50%);
background-size: 3em 4em, 3em 4em, 3em 4em, 1.2em 1em, 1.2em 1em;
background-position: 0% 0%, 0% 0%, 0% 0%, 0% 100%, 100% 100%;
background-repeat: no-repeat;
font-size: 0.5em;
z-index: -1;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="test-container">
<a class="close-ribbon"></a>
Czech Republic is easy...
</div>
</div>
</div>
</div>
You have a great base to go on. It just needs a few tweaks here and there. (Making individual styles for flags is going to be a colossal pain though). There's just a few places you could improve it. In most cases when using absolute positioning, you may want to have whatever you are positioning align with some edge of the parent element. For that you can use negative values like left: -1em or whatever, but a lot of times, it's more robust to leave left auto and set the right attribute to 100%. You also set the bottom border to right:0. In throwing it in this answer I discovered that the font size difference caused it to be aligned incorrectly. One way you can fix that is to give it a left:50% with a negative margin equal to the left border. In this case it's 1.5em. A few changes, but it's all about understanding and leveraging top, right, bottom, and left to their fullest potential, which includes percent based values.
Hope it helps!
body {
padding: 2em;
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.test-container{
background-color: lightgrey;
border: 1px solid black;
position: relative;
padding: 10px;
margin: 10px;
min-height: 100px;
}
.ribbon {
position: absolute;
top: 0;
right: 1em;
z-index: 1;
color: #eee;
font-size: 2em;
}
.norway {
position: absolute;
top: -0.5em;
right: 1em;
z-index: 1;
font-size: 2em;
height: 70px;
width: 42px;
background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%),
linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 54%, white 54%, white 60%, transparent 60%),
linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, white 34%, white 37%, red 37%);
}
.ribbon:before {
content: "";
font-size: 0.5em;
position: absolute;
border-style: solid;
border-color: transparent transparent #B71C1C transparent;
top: 0;
right: 100%;
border-width: 0 0 1em 0.7em;
z-index: -1;
}
.ribbon:after {
content: "";
font-size: 0.5em;
position: absolute;
height: 5em;
border: 1.5em solid #F44336;
z-index: -1;
bottom: 0;
border-top-width: 1.5em;
border-bottom-color: lightgrey;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
left: 50%;
margin-left: -1.5em;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="test-container">
<a class="norway ribbon"></a>
Norway
</div>
</div>
</div>
</div>
Inserted a div into the anchor tag and styled a before and after content to display the blue cross. Used a + symbol to display the white underneath cross.
jsfiddle.net/8g1w5va9/4
EDIT
Just saw your fiddle. Looks good! Was just going to suggest something like that but decided to at least build somewhat of a working model.
I have a div with a linear-gradiant as background. This gradient is created with a color parameter. But I also want to show a diagonal hatch pattern over the gradient.
"background: linear-gradient(" + color2 + "," + color + ")"
I've created the hatch pattern with another linear-gradient:
background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
I'm not able to show the two linear-gradient at the same time.
The order is important. Your last background-image will be rendered first, so this one has to be the non transparent one.
And also, you need to keep all the related properties, size and origin:
.div1 {
background-image:
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(#f00000,#ffffff);
background-size: 4px 4px, 4px 4px, 100% 100%;
background-position: 0px 0px, 2px 2px, 0px 0px;
}
fiddle
you could have nested divs and then apply the styles separately:
Html
<div class="div1"><div class="div2"></div></div>
Css
.div1 {background: linear-gradient(#f00000,#ffffff)}
.div2
{
background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
Example