This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 1 year ago.
Hi i need to know how to turn this square to rounded edges radius 50px
body {
background-color: #241d33;
}
.rainbow-box {
background-color: #302244;
border: 5px solid transparent;
border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
border-image-slice: 1;
height: 200px;
margin: 20px auto;
width: 200px;
}
<div class="rainbow-box"></div>
You can use 2 gradients and background-clip:
possible example:
body {
--border:25px;
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/id/1051/800/300) 0 0 / cover ;
}
body, .rainbow-box {
display: flex;
align-items: center;
justify-content: center;
}
.rainbow-box {
border: var(--border) solid transparent;
background: linear-gradient(#fff, #fff), linear-gradient( to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
background-clip: content-box, border-box;
border-radius: 25%;
height: 200px;
margin: 20px auto;
width: 200px;
mix-blend-mode: multiply;
}
<div class="rainbow-box">
<p>HELLO</p>
</div>
Related
I want to create a zig-zag border in css which is responsive, i.e. the zig-zag border must adjust itself to fit perfectly according to width of the container.
I was able to create this:
But on changing the width it's output is :
I want to perfectly fit the zig-zag pattern like above image on changing the width of the container.
It would be helpful if I could also add some radius at peak points like this :
Here is the code so far
.container {
width: 664px;
}
.sub-container {
border: 2px solid black;
border-bottom: 0;
padding: 40px;
height: 200px;
}
.upper-zigzag {
background: linear-gradient(135deg, #ffffff 25%, transparent 25%) 0px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) 0px 0;
background-size: 60px 60px;
background-color: black;
height: 32px;
background-repeat: repeat-x;
border-left: 2px solid black;
border-right: 2px solid black;
}
.lower-zigzag {
position: relative;
background:
linear-gradient(315deg, #ffffff 25%, transparent 25%) -28px -30px,
linear-gradient(45deg, #ffffff 25%, transparent 25%) -28px -30px;
background-size: 60px 60px;
background-color: transparent;
height: 30px;
background-repeat: repeat-x;
margin-top: -30px;
z-index: 1;
}
<div class="container">
<div class="sub-container"></div>
<div class="upper-zigzag"></div>
<div class="lower-zigzag"></div>
</div>
Thanks!
I can apply a mask-image at any place on a div I want, but can I apply more than one mask-image on the same div?
Example with a single mask-image:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
);
}
<div></div>
What would the code look like if I wanted to have the same mask applied at the top and at the bottom at the same time?
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
), radial-gradient(
circle at center bottom,
transparent 30px,
black 31px
);
}
<div></div>
Edit: I'm aware Chrome supports mask-composite, but that works (at the time of writing this) only with Chrome.
You need to play with the size and position. mask work the same way as background-image so simply imagine your self making two images on the same element (one on the top and the other on the bottom)
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask:
radial-gradient( circle at center top, transparent 30px, black 31px) top,
radial-gradient( circle at center bottom, transparent 30px, black 31px) bottom;
-webkit-mask-size:100% 51%; /* each one half the size */
-webkit-mask-repeat:no-repeat; /* don't forget this */
}
<div></div>
Another idea with one mask:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask: radial-gradient(circle, transparent 30px, black 31px) 0 100px; /* 100px is half the height */
}
<div></div>
and with the border:
div {
width: 200px;
height: 200px;
background: radial-gradient(circle, transparent 30px, black 0 33px,green 33px) 0 100px border-box;
border: 2px solid black;
-webkit-mask: radial-gradient(circle, transparent 30px, black 31px) 0 100px; /* 100px is half the height */
}
<div></div>
A solution with mask-composite:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask:
radial-gradient( circle at center top, transparent 30px, black 31px),
radial-gradient( circle at center bottom, transparent 30px, black 31px),
linear-gradient(black,black); /* this layer is mandatory */
-webkit-mask-composite: destination-in;
mask-composite: exclude; /* for non-webkit browser */
}
<div></div>
This question already has answers here:
Responsive CSS Trapezoid Shape
(2 answers)
Closed 2 years ago.
Can someone help me write plain html and css code for the below shape ?
Thanks in advance
HTML/CSS
.shape {
clip-path: polygon(0 19%, 100% 0, 100% 100%, 0 81%);
background-color: red;
width: 200px;
height: 400px;
}
<div class='shape'></div>
And you can make any shapes you want with clip path.
Try this website to make shapes https://bennettfeely.com/clippy/
Transparent Borders
div {
display:inline-block;
box-sizing: border-box;
height: 200px;
border: 40px solid;
border-top-color: #00000000;
border-left: 0;
border-bottom-color: #00000000;
}
<div></div>
Multiple backgrounds
div {
display: inline-block;
box-sizing: border-box;
height: 200px;
width: 50px;
background: linear-gradient(to top left, black 50%, white 51%) 0 0/100% 25% no-repeat, linear-gradient(to bottom left, black 50%, white 51%) 0 100%/100% 25% no-repeat, black;
}
<div></div>
Pseudo Elements
div {
position: relative;
display: inline-block;
box-sizing: border-box;
height: 200px;
width: 50px;
background: black;
}
div:before,div:after {
content: '';
position: absolute;
height: 25%;
width: 100%;
}
div:before {
top: 0;
background: linear-gradient(to top left,black 50%,white 51%) top/100% no-repeat ;
}
div:after {
bottom: 0;
background: linear-gradient(to bottom left,black 50%,white 51%) bottom/100% no-repeat;
}
<div></div>
I have a gradient which I want to start from left top, it's endpoint can be left as is.
Here are my current testing scenario's:
.test-1{
height: 200px;
border: 1px solid red;
}
.test-2{
height: 400px;
border: 1px solid blue;
}
.test-3{
height: 500px;
border: 1px solid red;
}
.test-4{
height: 600px;
border: 1px solid blue;
}
.gradient{
/* height: 100%;
width: 100%; */
padding: 0;
margin: 0;
background:
linear-gradient(190deg, #FFFFFF 22%, transparent 22.1%),
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
}
<div class="test-1 gradient"></div>
<div class="test-2 gradient"></div>
<div class="test-3 gradient"></div>
<div class="test-4 gradient"></div>
In .test-1, the div is too small, so its gradient is cutting off at the top. In this case, I would want it to end on the top left corner so it doesn't appear as if it's ending abruptly.
.test-2 is the same.
.test-3 is fine, it's not ending abruptly.
.test-4 is also fine, it not in the top left corner, but it's not cut off.
How can I cater this gradient to accommodate different div sizes?
You can adjust the top gradient to make it a triangular shape:
.test-1{
height: 80vh;
border: 1px solid red;
background:
/* position /width height */
linear-gradient(to bottom left,#fff 49.5%,transparent 50%) top/100% 30% no-repeat,
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
}
<div class="test-1 gradient"></div>
And if you want more space at the top add some padding
.test-1{
height: 80vh;
border: 1px solid red;
padding-top: 10vh;
background:
linear-gradient(to bottom left,#fff 49.5%,transparent 50%) top/100% 30% no-repeat,
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%) no-repeat;
background-origin:content-box;
}
<div class="test-1 gradient"></div>
Or add offset to the gradients:
.test-1{
height: 80vh;
border: 1px solid red;
background:
linear-gradient(to bottom left,#fff 49.5%,transparent 50%)left 0 top 20px/100% 30% no-repeat,
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%) left 0 top 20px no-repeat;
}
<div class="test-1 gradient"></div>
Another idea is to consider skew transformation
.test-1{
height: 80vh;
border: 1px solid red;
position:relative;
overflow:hidden;
z-index:0;
}
.test-1:before {
content:"";
position:absolute;
z-index:-1;
top:20px; /* Control the space */
bottom:0;
left:0;
right:0;
background:linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
transform:skewY(8deg);
transform-origin:left;
}
<div class="test-1 gradient"></div>
In the gradient can use vh instead of %
.test-1{
height: 200px;
border: 1px solid red;
}
.test-2{
height: 400px;
border: 1px solid blue;
}
.test-3{
height: 500px;
border: 1px solid red;
}
.test-4{
height: 600px;
border: 1px solid blue;
}
.gradient{
/* height: 100%;
width: 100%; */
padding: 0;
margin: 0;
background:
linear-gradient(190deg, #FFFFFF 60vh, transparent 34.1vh),
linear-gradient(90deg, #5c9c9b 0, #8ccdcc 100vh);
}
<div class="test-1 gradient"></div>
<div class="test-2 gradient"></div>
<div class="test-3 gradient"></div>
<div class="test-4 gradient"></div>
Below is the image I am trying for, I managed to get a square using CSS, but I am trying for horizontal and vertical line in a square.
.hub{
width: 119px;
height: 101px;
background: #b5adad;
}
<div class="hub"></div>
There are many ways to do this and one would be to use gradients like below: (the image in question was actually a rectangle.)
The approach is very simple - we use 2 linear gradients to create two thin solid colored lines and then position the images such that they match our needs. Linear gradients are used even though it creates only a solid color because it is easier to control size and position of an image than background color.
div {
height: 100px;
width: 200px;
border: 1px solid red;
background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red);
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 20px 0px, 0px 10px;
}
<div></div>
We can also create an output which has a fade-out or shadow effect like in the image in question:
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
<div></div>
Another way is to use :before and :after pseudo-elements:
.hub{
width: 119px;
height: 101px;
background: #b5adad;
position: relative;
padding: 18px 0 0 18px;
}
.hub:after, .hub:before {
content: " ";
background: black;
display: block;
position: absolute;
}
.hub:after {
width: 1px;
height: 100%;
left: 15px;
top: 0;
}
.hub:before {
width: 100%;
height: 1px;
top: 15px;
left: 0;
}
<div class="hub">Lorem ipsum dolor amet</div>