How can I apply different angles to the segments of a gradient, e.g. have the red and blue gradients at 45 degrees and green at 90 just like the image below?
.gradient1 {
height: 200px;
width: 200px;
background-image: linear-gradient(90deg, red 0%, blue 50%, green 50%);
margin-bottom: 10px;
}
.gradient2 {
height: 200px;
width: 200px;
background-image: linear-gradient(45deg, red 0%, blue 50%, green 50%);
}
<div class="gradient1"></div>
<div class="gradient2"></div>
sounds a conic-gradient to me:
.box {
width:200px;
height:200px;
background:conic-gradient(from -90deg at bottom,red,blue , green 90deg);
}
<div class="box"></div>
Or
.box {
width:200px;
height:200px;
background:conic-gradient(from -90deg at bottom,red,blue 90deg, green 0);
}
<div class="box"></div>
Or maybe multiple layers with a linear-gradient
.box {
width:200px;
height:200px;
background:
linear-gradient(45deg,red,blue) left/50% 100% no-repeat
green;
}
<div class="box"></div>
Related
I am trying to do something like the picture below. I would like a div with 3 borders, but the outer 2 borders are truncated in the way displayed in the picture. I am wondering if it is possible to get this effect with a pure CSS solution:
Here is a one element easy solution:
.box {
width:200px;
height:150px;
margin:80px;
border:10px solid red;
position:relative;
}
.box:before,
.box:after {
content:"";
position:absolute;
inset:-30px;
border:10px solid #0000;
border-image:linear-gradient(-45deg,blue 20%,#0000 0 80%,blue 0) 10;
}
.box:after {
inset:-50px;
border-image:linear-gradient(-45deg,green 20%,#0000 0 80%,green 0) 10;
}
<div class="box"></div>
Not sure if it is the simplest solution, but looks like I was able to do it with a background linear-gradient. Border colors help show the different components of the linear-gradient. Example here: https://jsfiddle.net/pn6a8rqj/171/
*{
--bw:15px;
}
.corners>div{
position:absolute;
}
.corners>div:nth-child(1),.corners>div:nth-child(2) {
position:absolute;
background:
/*top left*/
linear-gradient(to right, red var(--bw), transparent 0px) 0 0,
linear-gradient(135deg, blue calc(.7071*var(--bw)), transparent 0px) 0 var(--ch),
linear-gradient(to bottom, green var(--bw), transparent 0) 0 0,
linear-gradient(135deg, orange calc(.7071*var(--bw)), transparent 0px) var(--cw) 0,
/*bottom right*/
linear-gradient(to left, red var(--bw), transparent 0) 100% 100%,
linear-gradient(315deg, blue calc(.7071*var(--bw)), transparent 0px) 100% calc(100% - var(--ch)),
linear-gradient(to top, green var(--bw), transparent 0) 100% 100%,
linear-gradient(315deg, orange calc(.7071*var(--bw)), transparent 0px) calc(100% - var(--cw)) 100%;
background-repeat: no-repeat;
background-size: var(--cw) var(--ch);
}
.corners>div:nth-child(1){
top:0;
left:0;
--ch:var(--corner1Height);
--cw:var(--corner1Width);
width: calc(var(--width) + 8*var(--bw));
height: calc(var(--height) + 8*var(--bw));
}
.corners>div:nth-child(2){
top:calc(2*var(--bw));
left:calc(2*var(--bw));
--ch:var(--corner2Height);
--cw:var(--corner2Width);
width: calc(var(--width) + 4*var(--bw));
height: calc(var(--height) + 4*var(--bw));
}
.corners>div:nth-child(3){
box-sizing:border-box;
top:calc(4*var(--bw));
left:calc(4*var(--bw));
border: var(--bw) solid black;
width: var(--width);
height: var(--height);
}
#div1 {
--corner1Height:50px;
--corner1Width:100px;
--corner2Height:100px;
--corner2Width:200px;
--width:500px;
--height:300px;
width: var(--width);
height: var(--height);
}
I'm trying to create a pyramid. I figured I'd use the CSS clip-path for that. I meant to do a triangle (which I managed to do) and several trapezoids beneath it (even the first one failed).
.container {
min-width: 50%;
max-width: 50%;
}
.triangle {
background-color: yellow;
clip-path: polygon(90% 100%, 50% 0%, 10% 100%);
}
.trapeze {
background-color: blue;
clip-path: polygon(0% 10%, 0% 90%, 0% 100%, 100% 100%);
}
div {
min-height: 200px;
max-height: 200px;
border-color: black;
border-style: solid;
}
<div class="container">
<div class="triangle"></div>
</div>
<div class="container">
<dic class="trapeze"> </dic>
</div>
Finally, here's the result :
I'm not working with any framework and I am using Firefox 67
Use clip-path once then rely on gradient to simulate the different shapes:
.pyramid {
width:200px;
height:200px;
-webkit-clip-path:polygon(0 100%,100% 100%, 50% 0);
clip-path:polygon(0 100%,100% 100%, 50% 0);
background:
linear-gradient(to bottom,
yellow 0 20%,
red 20% 50%,
blue 50% 100%);
}
<div class="pyramid">
</div>
Happy new year!
Im trying to substitute this background picture with a css for scaling purposes.
Im having a problem with gradients logic.
the div properties:
.bg {
border: 1px solid white;
border-radius:10px;
padding:10px;
width:100%;
}
then im trying to color it
the background color is #065BDB
the 'bubble reflection' color is a gradient from rgba(87,144,231,1) to rgba(87,144,231,0) - same color with fading opacity.
to make the right shape of the 'bubble' i need to draw circle-square-circle with gradients, the circles draw ok, but the rectangle is problemetic
background:
radial-gradient(2em 2em at 3% 25%, rgba(87,144,231,1) 50%, transparent 50%),
linear-gradient(to bottom, transparent 3%, rgba(87,144,231,1) , transparent 97%),
radial-gradient(2em 2em at 97% 25%, rgba(87,144,231,1) 50%, transparent 50%);
im having multiple issues with this, cannot figure out how to draw a square from top to bottom with a margin on left and right, and how to add transparency from top to bottom to it, + adding a seconds background, maybe its better to make 2 divs instead of 1.
You can rely on a pseudo element and easily obtain the result:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background: #065BDB;
position:relative;
z-index:0;
}
.bg::before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:15px;
right:15px;
height:30px;
border-radius:inherit;
background:linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0));
}
<div class="bg">
</div>
With multiple background you can try this:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background:
radial-gradient(30px 30px at right,transparent 50%, #065BDB 52%) 0% 10px/35px 30px,
radial-gradient(30px 30px at left,transparent 50%, #065BDB 52%) 100% 10px/35px 30px,
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 10px/100% 30px,
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
We can add some CSS variable to control the shape:
.bg {
--h:30px; /*the height of the bubble*/
--d:35px; /*the distance from the sides*/
--t:10px; /*the distance from the top*/
margin:5px;
border-radius: 50px;
height:60px;
background:
radial-gradient(var(--h) var(--h) at right,transparent 50%, #065BDB 52%) 0% var(--t)/var(--d) var(--h),
radial-gradient(var(--h) var(--h) at left,transparent 50%, #065BDB 52%) 100% var(--t)/var(--d) var(--h),
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 var(--t)/100% var(--h),
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
<div class="bg" style="--h:20px;--d:50px;--t:20px"></div>
<div class="bg" style="--h:40px;--d:100px;--t:5px"></div>
try with ::before
.bg {
width:100%;
height:50px;
position:relative;
background:royalblue;
border-radius:20px;
}
.bg::before {
content:'';
width:97%;
height:25px;
background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.07));
position:absolute;
top:7px;
left:50%;
transform:translateX(-50%);
border-radius:20px;
}
<div class="bg"></div>
I want the bottom of my background-color to be another colour. I'm sure it involves a linear-gradient? but unsure on how to implement it
Sample code:
.background{
height:100px;
width:200px;
background-color: #11143b;
background: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
}
<div class="background">
</div>
How I eventually want the above code to look:
Any help would be appreciated.
Simply like this:
.background{
height:100px;
width:200px;
background:
linear-gradient(to bottom right, transparent 49%,red 52%) bottom / 100% 20px no-repeat,
#11143b;
}
<div class="background">
</div>
Solution 1: After pseudo element
You can make a triangle an position it in the desired loscation. This element wont affect the content inside your element as it has a position of absolute
.background{
height:100px;
width:200px;
background-color: #11143b;
position: relative;
}
.background:after{
content: '';
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 200px;
border-color: transparent transparent #ff0000 transparent;
}
<div class="background">
</div>
Solution 2: Gradient
This linear gradient can be a solution but might have some resolution problems
.background{
height:100px;
width:200px;
background-color: #11143b;
background: linear-gradient(0.48turn, #11143b 85%, red 75%);
}
<div class="background">
</div>
Hope this helps:>
I thought about creating a background with arrows. Something that looks like in this codepen: http://codepen.io/DaSch/pen/rrWAmy
.top {
height: 5em;
background:
repeating-linear-gradient(
45deg,
lightgray,
lightgray 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
.bottom {
height: 5em;
background:
repeating-linear-gradient(
135deg,
lightgray,
lightgray 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
In the given example there are two elements but together to make it look like I want it to. If I but the gradients together I just get strips. I tried a lot but I can't figure out how to create arrows. with multiple gradients an background-blend-mode.
I'm not sure if this is possible. But I'm looking for a solution without external background-images. If it's not possible a good explanation why would be great.
Here is what I have. It looks like an arrow, and can be repeated using JavaScript. I can't do this with pure CSS. Maybe this solution gives you an idea for your code.
.top {
height: 5em;
width:80px;
margin-left:120px;
background:
repeating-linear-gradient(
45deg,
white,
white 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
.bottom {
height: 5em;
width:80px;
margin-left:120px;
background:
repeating-linear-gradient(
135deg,
white,
white 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
.middle
{
background-color:gray;
height:30px;
width:200px;
margin-right:10px;
}
.maskCornerTop
{
width:40px;
height:40px;
position:relative;
background-color:white;
float:right;
}
.maskCornerBottom
{
width:40px;
height:40px;
background-color:white;
float:right;
margin-top:40px;
position:relative;
}
<div class="top"><div class="maskCornerTop"></div></div>
<div class="middle"></div>
<div class="bottom"><div class="maskCornerBottom"></div></div>
<br/>
<div class="combo"></div>
After some research I found, that the solution is to overlay different backgrounds and use only the half hight for the upper one.
It'll look like this
.combo {
height: 10em;
background:
repeating-linear-gradient(
45deg,
lightgray,
lightgray 33.33%,
gray 33.33%,
gray 66.66%
),
repeating-linear-gradient(
135deg,
gray,
gray 25%,
lightgray 25%,
lightgray 50%
);
background-size: 10em 50%, 10em 100%;
background-repeat: repeat-x, repeat-x;
}
Still this maybe isn't the best solution as it only works if the height of the container is known and fixed.