How to draw many diagonal lines within rectangle in the beginning using css, html?
I want to draw diagonal lines in the beginning of the rectangle.
I could display the rectangle using below Code:
<div className={moneybarsection.bar1} />
.bar {
width: 100%;
height: 25px;
}
.bar1 {
#extend .bar;
background: #24891D;
border-left: 150px solid #6FD967;
}
.bar {
width: 200px;
height: 25px;
background: #6FD967;
border-right: 150px solid green;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
transparent 1px,
green 7px
),
linear-gradient(
to bottom,
transparent,
transparent
)
}
Working Fiddle: https://jsfiddle.net/mamata/q3ef8b7d/
.bar {
height: 100px;
width: 5px;
background: black;
transform: rotate(45deg);
}
Working Fiddle: https://jsfiddle.net/b38zkr53/
Using transform you can create diagonal line.
.triangle,.triangle1 {
height: 100px;
width: 5px;
background: black;
transform: rotate(45deg);
margin-left: 200px;
display:inline-block;
}
.triangle1{ transform: rotate(137deg);margin-left:62px;}
.triangle2{border-bottom:5px solid #000;width:20px;margin-left:200px;height:5px;}
<div class="triangle"></div><div class="triangle1"></div>
<div class="triangle2">
Related
Looked for circular progress to indicate on which step the user is out of 4.
Like
1st form out of 4,
2nd form out of 4,
3rd form out of 4,
4th form out of 4
Below are screen shot of what is expected.
I got few example which had two div inside it. CSS Progress Circle
Which I though was complex in my case where I just need 4 steps.
Here is my solution which just used border and sudo elements before and after
Which is very simple.
NOTE: This can only used in case of 4 steps.
.count {
position: relative;
width: 40px;
height: 40px;
margin-right: 10px;
display: inline-block;
border: 1px solid #ffc107;
border-radius: 50%;
font-family: Arial;
color: #888;
}
.count span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.count:after {
position: absolute;
content: "";
background: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
left: 5px;
top: 5px;
}
.count:before {
position: absolute;
content: "";
border: 20px solid #ffc107;
border-radius: 50%;
height: 0;
width: 0;
transform: rotate(45deg);
}
.count.step1:before {
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
}
.count.step2:before {
border-left-color: transparent;
border-bottom-color: transparent;
}
.count.step3:before {
border-left-color: transparent;
}
<div class="count step1">
<span>1</span>
</div>
<div class="count step2">
<span>2</span>
</div>
<div class="count step3">
<span>3</span>
</div>
<div class="count">
<span>4</span>
</div>
You could put the progress bar as a pseudo element to the form itself or of course as a separate element, using conic and radial gradients to draw the circle.
For example when you want to show when at a particular step of a totalSteps this could be drawn with:
background-image: radial-gradient(circle, white 0 50%, transparent 50% 100%), conic-gradient(gold 0 calc(360deg * var(--n) / var(--totalSteps)), transparent calc(360deg * var(--n) / var(--totalSteps)) 100%);
That way it will work for any number of steps.
Simple example:
form.progress::after {
/* these variables would be set by JS - they are here just for demo */
--totalSteps: 4;
--step: 3;
--stepString: '3';
content: var(--stepString);
width: 10vmin;
height: 10vmin;
background: white;
border: 1px solid gold;
border-radius: 50%;
background-image: radial-gradient(circle, white 0 50%, transparent 50% 100%), conic-gradient(gold 0 calc(360deg * var(--step) / var(--totalSteps)), transparent calc(360deg * var(--step) / var(--totalSteps)) 360deg);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
<form class="progress">
</form>
Here is another idea using border:
.step {
width:70px;
height:70px;
border-radius:50%;
border:2px solid red;
display:inline-grid;
place-items:center;
font-size:30px;
position:relative;
z-index:0;
}
.step:before {
content:attr(data-step);
}
.step:after {
content:"";
position:absolute;
inset:0;
z-index:-1;
border:14px solid;
border-radius:50%;
transform:rotate(45deg);
}
[data-step="1"]:after {border-color:red #0000 #0000 #0000}
[data-step="2"]:after {border-color:red red #0000 #0000}
[data-step="3"]:after {border-color:red red red #0000}
[data-step="4"]:after {border-color:red red red red }
<div class="step" data-step="1"></div>
<div class="step" data-step="2"></div>
<div class="step" data-step="3"></div>
<div class="step" data-step="4"></div>
I am trying to get the line on the left-side in the picture on the right side reversed
see image below:
.line-down {
width: 50px;
height: 60px;
border: solid 5px #9494b8;
border-color: transparent #9494b8 transparent transparent;
border-radius: 100%/100px 340px 0 0;
}
<div class="line-down"></div>
One way to do it is to flip the right-hand shape on its x-axis:
body{display:flex;justify-content:space-around}
.line-down {
width: 50px;
height: 60px;
border: solid 5px #9494b8;
border-color: transparent #9494b8 transparent transparent;
border-radius: 100%/100px 340px 0 0;
}
.line-down.right{
transform: scaleX(-1);
}
<div class="line-down"></div>
<div class="line-down right"></div>
You can switch the rules between the left border and the right border and it will be exactly the same shape.
.line-down.right {
border-color: transparent transparent transparent #9494b8;
border-radius: 100%/340px 100px 0 0;
}
I am trying to create an element which is a half-circle with a complete circle border. Like this:
I have no problem doing it with using 2 elements, but don't fully understand how to do it within one DIV.
Right now all I have is a half circle:
.element {
height: 10px;
width: 10px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
background-color: #00a680;
}
You can simply use gradient:
.box {
width: 150px;
height: 150px;
border: 15px solid #00a680;
border-radius: 50%;
padding: 15px;
background: linear-gradient(to right, #00a680 50%, transparent 0) content-box;
box-sizing:border-box;
}
<div class="box">
</div>
I have a triangle on my page and if the user hovers over it, it should change the cursor to a pointer. So far so good.
The triangle is made in CSS:
#triangleShape {
width: 0;
height: 0;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-bottom: 400px solid rgb(18, 75, 35);
cursor: pointer;
}
<div id="triangleShape"></div>
So if the user hovers over this div, it changes the cursor but it should change the cursor only when the user is hover over the actual green triangle. I know this CSS reacts to the whole div, but is this possible what I want to achieve?
You can consider SVG to create the shape and you will have what you need:
svg polygon{
cursor: pointer;
}
<svg height="300" width="400">
<polygon points="200,0 0,300 400,300" fill=green />
</svg>
Or consider clip-path:
.triangle {
width: 400px;
height: 300px;
background: green;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
cursor:pointer;
}
<div class="triangle"></div>
That's a normal behaviour as the transparent border is a part of your div. The cursor: pointer will then react to the whole square.
You could use a child element (pseudo element or anchor tag) and play with overflow and transforms.
div {
width: 300px;
height: 300px;
overflow: hidden;
}
div::before {
cursor: pointer;
content: ' ';
display:block;
height: 100%;
background: green;
transform: rotate(45deg) translateX(150px) translateY(150px)
}
<div></div>
Follow the below reference to get a better idea about CSS cursor Properties.
Reference: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
That being said, you can use the following snippet to get the work done.
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
cursor: pointer;
}
<div class="triangle-up"></div>
Good luck!
I'm trying to create a CSS background that looks like this:
I've been able to create the shape, but can't figure out how to add the bottom border, and am starting to think my approach may be the problem.
So far I have the following CSS:
#top-background-flag {
border-top: 2px solid #C2C2C2;
background: linear-gradient(
to bottom right,
#5DCAD3 50%,
transparent 50.5%
)
no-repeat bottom, /* bottom part */
linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
/* top portion */
padding-bottom: 3.5rem;
border-bottom: 2px solid #C2C2C2;
background-size: 100% 3rem, 100% calc(100% - 3rem)
}
and HTML:
<div id=top-background-flag>
A fun title
</div>
and a code pen: https://codepen.io/arel/pen/PKXGmd
My problem right now is that the bottom border is a horizontal line, and I can't figure out how to have it follow the angle of the box.
Here is what I have so far:
Trying to use a linear gradient may not be the best solution here.
Appending an object with a little CSS transformation some judicious layering will accomplish what you want and will have fewer properties to adjust if you want to change the angle later.
#top-background-flag {
border-top: 2px solid #C2C2C2; /* top border on the parent */
position: relative;
padding-bottom: 3.5rem;
overflow: hidden;
}
#top-background-flag:before {
background-color: #5DCAD3;
transform: skewy(-4deg); /* angle you want */
transform-origin: bottom left;
border-bottom: 2px solid #C2C2C2; /* bottom border skews with the object */
content: ' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
bottom: 0;
}
Here is a working example to play with
Add this CSS to fake a bottom border:
#top-background-flag:after {
content: "";
background-color: red;
height: 2px;
width: 100%;
position: absolute;
left: 0;
bottom: 23px;
transform: rotate(-5.5deg);
}
Here is a working fork of your codepen: https://codepen.io/anon/pen/XaojPp
I'm not sure that this is what you are looking for, but you can use the :after pseudo class with the content trick:
body {
max-width: 500px;
}
#top-background-flag {
border-top: 2px solid #C2C2C2;
background: linear-gradient(
to bottom right,
#5DCAD3 50%,
transparent 50.5%
)
no-repeat bottom, /* bottom part */
linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
/* top portion */
padding-bottom: 3.5rem;
border-bottom: 2px solid #C2C2C2;
background-size: 100% 3rem, 100% calc(100% - 3rem);
position: relative;
}
#top-background-flag:after {
content: '';
border-bottom: 1px solid red;
border-top: 1px solid red;
position: absolute;
width: 100%;
bottom: 22px;
left: 0;
transform: rotate(-5.5deg);
}
<div id=top-background-flag>
A fun title
</div>