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;
}
Related
I want to create a Triangle (preferably using a pure CSS method) that has a two colors. The triangle can be filled to a certain height, this has to be done dynamically on a website as the triangle represents the speed of a device. I want to accomplish the following result:
The yellow part of the triangle needs to be adjustable. (I don't mind althering the CSS using jQuery but the use of images is a no-go). I've managed to create a triangle using the 'border-method' and I've have managed to partially fill a square using a background linear gradient but the combination of both is proving to be quite a challenge.
.arrowLeft{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 100px;
border-color: transparent transparent transparent #5f5f5f;
float:left;
}
Does anyone have suggestions on how to solve my problem?
You can create two triangles and position then relatively:
.arrowContainer{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 100px;
border-color: transparent transparent transparent #5f5f5f;
position: relative;
}
.arrowContainer .arrowLeft {
width: 0;
height: 0;
border-style: solid;
border-width: 11px 0 12px 80px;
border-color: transparent transparent transparent red;
position: absolute;
right: 0;
top: -11px;
}
<div class="arrowContainer">
<div class="arrowLeft"></div>
</div>
You can create the triangular shape using the border and put the gray and orange div behind it using z-index method: https://jsfiddle.net/62yj9wn5/
html:
<div class="triangle">
<div class="vshape">
</div>
<div class="orange">
<div class="gray">
</div>
</div>
</div>
css:
html, body {background-color: black}
.orange {
background-color: orange;
width: 50px;
height: 120px;
position: relative;
margin: -120px 0 0 0px;
z-index: 1;
}
.gray {
background-color: gray;
width: 50px;
// change the hight dynamically
height: 50px;
}
.vshape{
width:0px;
height: 0px;
border-style: solid;
border-width: 120px 25px 0 25px;
border-color: transparent black transparent black;
position: relative;
z-index: 2;
}
You can easily reuse those classes if multiply the object and rotate it the "other" 3 directions.
I'm trying to make a triangle in CSS that takes the whole width of the parent with a fixed height.
I successfully did so with a linear-gradient like this:
.triangle {
width: 100%;
height: 120px;
background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}
<div class="triangle"></div>
But the diagonal doesn't look crisp. How could I do the same in CSS without using gradient?
You can blur the edge a bit
.triangle {
width: 100%;
height: 120px;
background: linear-gradient(to right bottom, blue 49.5%, transparent 50%);
}
<div class="triangle"></div>
the border approach as mention could be done this way to be similar :
.triangle {
width:0;
border-style:solid;
border-width: 0px 0px 120px 100vw;
border-color:transparent transparent transparent blue ;
}
<div class="triangle"></div>
Best is to use an SVG ....
The trick is to make a triangle out of the border. Since CSS does not allow using percentage in border-width, I'm using 100vh instead of 100%.
Please try this:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 120px 100vw;
border-color:transparent transparent transparent blue ;
}
Why dont you try without gradient property using border-width.I have implemented one using border-width which gives the boundaries more crisp. Here is the runable version.
.triangle {
width: 100%;
height: 120px;
background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}
.container{
width : 300px;
}
.triangleUsingbordermethod {
border-top-color: blue;
border-top: 60px solid blue;
border-left: 50% solid black;
border-left: 150px solid blue;
border-right: 150px transparent solid;
border-bottom: 60px transparent solid;
}
<div class='container'>
<div class="triangleUsingbordermethod"></div>
</div>
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">
I created a profile dialog body like this:
<div style="background-color: white;
color: black;
border-radius: 2px;
position: absolute;
top: 52px;
right: 10px;
padding: 2px">
<div style="width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 15px 10px;
border-color: transparent transparent #ffffff transparent;
position: relative;
top: -10px;
right: -165px">
</div>
</div>
I want to place child little triangle div always 10-20px far away from right end of parent div. How I can make second little triangle div take its start position on right from the end of parent div?
Just make the parent div's position relative and the child's position absolute
Something like this in your example:
<div style="background-color: black;color: black;border-radius: 2px; position: relative; padding: 2px ; width:1000; height:1000;">
<div style="
position: absolute;
width: 200;
height: 200;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
top: 10px;
right: 16px;
background-color: blue">
</div>
The width of the inner DIV is 20px (left border + right border). Add another 2px for the border of the outer DIV and you have 22px as your zero position for the starting of the triangle.
Therefore, if you want the triangle to start 20px from the right side of the outer DIV, it is 22px + 20px:
right:-42px;
jsFiddle Demo
div{position:relative;}
#one{position:absolute;top:52px;right:200px;padding:2px;background-color:white;color:black;border-radius: 2px; }
#two{width:0;height:0;top:-10px;right:-22px;
border-style:solid;
border-width:0 10px 15px 10px;
border-color: transparent transparent #ffffff transparent;
}
body{background:darkcyan;}
<div id="one"><div id="two"></div></div>
Here is 2 good solutions that will allow the div and its content to flow properly with other page content.
If all you need is that "triangle", use a pseudo element instead
#one {
background-color: #ddd;
color: black;
border-radius: 2px;
position: relative;
padding: 2px;
width:200px;
height:80px;
padding-right: 15px; /* make up for the triangle so inner content does not overlap */
}
#one:after {
content: ' ';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 15px 10px;
border-color: transparent transparent #f00 transparent;
}
<div id="one">
</div>
More content out side the `one` div
This one use float, also have it stay either at top/right or bottom/right.
#one {
background-color: #ddd;
color: black;
border-radius: 2px;
top: 52px;
right: 10px;
padding: 2px;
clear: both;
}
.inner {
height: 30px;
background: green;
}
#two {
float: right;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 15px 10px;
border-color: transparent transparent #f00 transparent;
}
<div id="one">
<div id="two"></div>
Now, anything you write here, whether it is text, or another element
<div class="inner"></div>
the "two" div will always stay at the right top<br><br>
</div>
More content out side the `one` div
<br>
<br>
<div id="one">
Now, anything you write here, whether it is text, or another element
<div class="inner"></div>
the "two" div will always stay at the right top<br><br>
This one has it stay at the right bottom
<div id="two"></div>
</div>
More content out side the `one` div
I have a div with different colors for both the border-bottom and border-right properties.
So they are separated via a line leaving the box in a 45 degree angle.
How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?
You can do this with box-shadow.
Demo:
Output:
CSS:
#borders {
border-bottom: 20px solid black;
box-shadow: 20px 0 0 0 red;
height: 150px;
margin: 30px;
width: 150px;
}
HTML:
<div id="borders"></div>
I solved this issue using border-width. You simply reduce the width of the border at the edges you don't want to see.
If we don't want the border on the upper edge, we can put border-width to 0.
border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;
Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)
In order to simulate a butt joint, you can stack two divs to get a simulated result:
div {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>
Stack more or control the top and bottom differently for better control over the appearance of the joint.
For the top border and the bottom border, you can use box-shadow:
.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}
<div class="box"></div>
What you are seeing is that borders on different sides will split diagonally around the corner:
.border {
border: 10px solid;
border-top-color: forestgreen;
border-right-color: gold;
border-bottom-color: steelblue;
border-left-color: firebrick;
width: 40px;
height: 40px;
}
<div class="border"></div>
This is a behavior many use to create CSS triangles
To overcome this I can find 2 solutions: borders on a wrapper element, or linear gradients:
Option 1: Wrapper elements
.wrapper {
border-bottom: 10px solid steelblue;
height: 40px;
width: 50px;
}
.border {
border-right:10px solid gold;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="border"></div>
</div>
Note how the wrapper element has height of 5px more then the child. This is essential for the borders to align.
Option 2: Linear Gradients
.border {
border-bottom: 10px solid;
border-right: 10px solid;
border-image: linear-gradient(to top, steelblue, steelblue 10px, gold 5px, gold) 10;
height: 40px;
width: 40px;
}
<div class="border"></div>
If you're looking for square ends on your borders, you can set two of the borders to 0px and then run a dummy animation like so :
#keyframes widthSet {
to{
border-right-width: 10px; //or top and bottom, your choice
border-left-width: 10px;
}
}
with animation-fill-mode: forwards;
You can't.
For 90˚ angles you could just use colored divs.
You could get a similar effect for arbitrary angles by using skew transitions and absolute positioning, but it will be hard (if not impossible) to get it to look the same in older browsers (IE8 and lower will particular be a problem).