This question already has answers here:
Inset border-radius with CSS3
(8 answers)
Closed 7 years ago.
I'm trying to create a div with inside circle at the corner. It should look like the picture shown below
Can someone help to solve this problem?
You could do this:
.box {
width: 200px;
height: 200px;
background:
radial-gradient(circle at 0 100%, transparent 14px, red 15px) bottom left,
radial-gradient(circle at 100% 100%, transparent 14px, red 15px) bottom right,
radial-gradient(circle at 100% 0, transparent 14px, red 15px) top right,
radial-gradient(circle at 0 0, transparent 14px, red 15px) top left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
<div class="box"></div>
More info: Inset border-radius with CSS3
BUT (!) if you need more complexity on the shapes of that border, you could use a background image or a border image:
.box{
width: 200px;
height: 200px;
background: #EEE;
border: 30px solid transparent;
border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}
<div class="box"></div>
More info: Decorative border css
Related
I am trying to create a CSS gradiant based vertical progress bar as shown in the figure.
Sample Image
I want to achieve the followings:
It should only have two colors.
The gradient should be a dotted one (similar to dotted border).
I should be able to set the height of each color. For example, if I want the 30% of the height of the gradient to be gray, the rest of the 70% should be set to green. And there shouldn't be a spread of the color(not sure of the right term).
Any clues on how this can be achieved via CSS only.
I have tried the following code with no success, just pasting it for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 700px;
width: 10px;
background-image: linear-gradient(180deg, transparent, transparent 50%, #fff 50%, #fff 50%), linear-gradient(180deg, orange 25%, black 75%);
background-size: 100% 20px, 100% 700px;
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
You could paint the vertical line n% in lime and then 100% - n% in gray.
Then overlay that with a repeating linear gradient of transparent and white.
.line {
height: 700px;
width: 10px;
background-image: linear-gradient(transparent 0 50%, white 50% 100%), linear-gradient(lime 0 71%, gray 71% 100%);
background-size: 100% 10%, 100% 100%;
}
<div class="line"></div>
You can use mask and gradient like below:
.line {
height: 300px;
width: 20px;
-webkit-mask: radial-gradient(circle closest-side, #000 96%, #0000) 0 0/100% 10%;
background: linear-gradient(red 60%, blue 0);
}
<div class="line"></div>
I have this code for background style of my div and works well for all mobile device and desktop but not for iOS.
This is my code:
#test{
box-shadow: -1px 0px 5px 1px #ccc;
padding:20px;
background: radial-gradient(#f7f7f7 2px, transparent 3px), radial-gradient(#f7f7f7 2px,transparent 3px), #fff;
background-position-x: 0%, 0%, 0%;
background-position-y: 0%, 0%, 0%;
background-size: auto, auto, auto;
background-position: 0 0, 20px 20px;background-size: 10px 10px;
height:100px;
}
<div id="test">
</div>
On iOS, the dots in the background are shown empty and not full. How can I fix my code to see the filled dots in my background on iOS device?
Set below properties also as only radial-gradient won't work in all browsers.
background: -webkit-linear-gradient();
background: -moz-linear-gradient();
background: linear-gradient();
Use thiswebsite to generate those properties.
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 1 year ago.
Basically, I have this CSS code that uses a linear gradient to cut a 45-degree chunk out of the corner of my div. However, I want to apply a gradient to the top of the div with the transparent part still there.
What I want
What I have
This is the code I have in CSS
.sectionlabel {
position: absolute;
width: 100%;
color: white;
height: 35px;
top: -35px;
border-top-left-radius: 6px;
background: linear-gradient(225deg, transparent 10px, #676767 0);
}
I'm not completely sure what to add to this to overlay a gradient onto the div.
All help is appreciated!
Thanks,
GraysonDaMighty
Consider using clip-path to cut the edge of an angle.
div {
height: 35px;
width: 200px;
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
background-image: linear-gradient(0deg, black, gray 80%);
}
<div></div>
This question already has answers here:
creating a responsive diagonal line in element
(2 answers)
Closed 2 years ago.
I want to show the diagonal line inside div,but it shows just the 135 degree line.
Of course there is 135deg , but how can I change the div degree depending on div size???
#ConnectLine{
pointer-events: none;
position: absolute;
z-index:5;
background: linear-gradient(135deg, transparent, transparent 49%, black 49%, black 51%, transparent 51%, transparent);
}
<div id="ConnectLine" style="width:100px;height:200px;"></div>
Make use of calc in css
#ConnectLine {
border: 1px solid red;
background: linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%);
}
<div id="ConnectLine" style="width: 100px; height: 200px;"></div>
This question already has answers here:
Making a dotted grid with CSS
(2 answers)
Make chainmail background theme
(1 answer)
Closed 3 years ago.
How can one go about creating a Dotted Grid Paper Background using CSS just like the one in the figure below?
I think a simple radial-gradient can help you, especially to avoid a ton of repetitions in the code
body {
background : radial-gradient(#000 3px, transparent 4px) 0 0 / 50px 50px;
}
You can adjust the distance between the dots by changing the background-size (defined in the shorthand as 50px 50px) and/or the background-position (defined in the shorthand as 0 0)
A simple and easy way will be to use background: repeating-linear-gradient(); which is supported by most browsers. You can check browser support on caniuse.com
Here is a code snippet that works:
.gridBackground {
background: repeating-linear-gradient(transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px),
repeating-linear-gradient(0.25turn, transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px);
}
/* Reset & other Formatting CSS */
body{
margin: 0; padding: 0;
width: 100vw; height: 100vh;
color: #fff;
font-family: monospace;
font-size: 1.5rem;
text-align: center;
}
.gridBackground{
display: flex;
align-items: center; justify-content: center;
width: 100%; height:100%;
}
<div class="gridBackground">
You like Grid Backgrounds,<br/>don't you?
</div>
Hope this helps...
Peace 🖖