This question already has an answer here:
Html/Css Triangle with pseudo elements
(1 answer)
Closed 1 year ago.
How to add an arrow on the CSS vertical line by using just pure CSS?
My vertical line is just using the CSS border-right only, then I want to add a two-lines arrow on this line to make it like an arrow, like this:
<div class="ve-line"></div>
.ve-line{
border-right: 1px solid rgb(232, 232, 232);
}
You can create CSS triangle by using border than add another one larger triangle to create border like style and position it absolutly with right: -1px to place it on the line.
.ve-line{
border-right: 1px solid rgb(232, 232, 232);
height: 500px;
position: relative;
}
.triangle {
position: absolute;
right: -1px;
top: 100px;
}
.triangle:before,
.triangle:after {
content: "";
display: inline-block;
width: 0;
height: 0;
}
.triangle:before {
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid rgb(232, 232, 232);
}
.triangle:after {
position: absolute;
right: 0;
top: 2px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white;
}
<div class="ve-line">
<div class="triangle"></div>
</div>
Related
This question already has answers here:
set css border to end in a 90 instead of a 45 degree angle
(7 answers)
css outline left and right
(1 answer)
Closed 2 years ago.
I want to create a element that has a red border and a white right border but CSS creates a small diagonal cut out:
h1 {
border: 5px solid red;
border-right: 5px solid white;
}
Is there a way to make the lines go straight?
div {
width: 300px;
height: 100px;
background: #eee;
border-radius: 0px;
border-top: 0;
border-left: 0;
border-right: 0;
border-left: 6px solid #0b0;
border-top: 6px solid #0b0;
border-bottom: 6px solid #0b0;
border-right: 6px solid #fff;
margin: 10px;
}
<div></div>
Simply reduce the width of the right border.
I've added a background color to the div tags to emphasize where the content is drawn. Drawing a zero-width border will definitely affect the layout, but you could adjust for that by adding a margin-right.
#div1,
#div2,
#div3,
#div4 {
height: 100px;
width: 100px;
margin: 2px;
display: inline-block;
background-color: grey;
border: 5px solid red;
}
#div2 {
border-right-color: white;
}
#div3 {
border-right: 0px;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
I have created a div that looks like an arrow with css border.
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
Now i want to create an extra border on the right side of that div, lets say: 1px solid black
How can i do that?
hers is the fiddle: https://jsfiddle.net/wqehc9vv/4/
So it should look like this:
image preview
You can use a pseudo-element like :before for that. And make it slightly bigger than the div. Also position it accordingly. See below
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
.blue-arrow-right:before {
content:"";
position:absolute;
left:-30px;
top:-32px;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
border-left: 32px solid black;
z-index:-1;
}
<div class="blue-arrow-right">
</div>
This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 7 years ago.
I have a triangle
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid white;
}
How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs?
One way to do it is the create an inner triangle which is smaller.
.triangle-left {
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-right: 23px solid red;
}
.inner-triangle {
position: relative;
top: -20px;
left: 2px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
<div class="triangle-left">
<div class="inner-triangle"></div>
</div>
This is how I would do it.
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid black;
position: relative;
}
.triangle-left:after {
content: '';
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-right: 21px solid #dddddd;
position: absolute;
top: -21px;
left: 1px;
}
<div class="triangle-left"></div>
Here it is on JSFiddle.
It has been a long time since I built this triangle which points up. How can I alter my CSS to point the corner left?
http://jsfiddle.net/3sP8q/
.left-corner {
width: 0;
height: 0;
border-bottom: 15px solid #000;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: relative;
}
<div class="left-corner"></div>
Here is how:
.left-corner {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
<div class="left-corner"></div>
Use CSS-Tricks, it helps a lot!
It's 2013 now and im just wondering if there has come a better way to achieve this? Is there a way to do this with just one element?
div.linetop { border-top: 1px solid #111111; }
div.linebottom { border-top: 1px solid #292929; }
// make a line
<div class="linetop"></div>
<div class="linebottom"></div>
Edit
This is what happens with HR the first pixel is grey :/ (im using chrome btw dont have any other browsers):
Tried both:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
and
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
Edit
Solved it! Simply adding border:none before
hr {
border: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
You could use the <hr> tag, and use both border-top and border-bottom:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
The HTML is simply: <hr>.
jsFiddle here.
Possible alternative solutions:
1. CSS gradients - support info
HTML: <div class='v1'></div>
Relevant CSS:
.v1 {
background: linear-gradient(#111 50%, #292929 50%) no-repeat 50% 75%;
background-size: 80% 2px;
}
2. a :before pseudo-element & a box-shadow - support info
HTML: <div class='v2'></div>
Relevant CSS:
.v2 { position: relative; }
.v2:before {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
box-shadow: 0 1px #292929;
background: #111;
content: '';
}
3. :before and :after pseudo-elements - support info
HTML: <div class='v3'></div>
Relevant CSS:
.v3 { position: relative; }
.v3:before, .v3:after {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
background: #111;
content: '';
}
.v3:after { margin-bottom: -1px; background: #292929; }
demo
You can use <hr> tag, and use border-top and border-bottom to define you two lines color:
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #08f;
border-bottom: 1px solid #666;
}
CSS
#hrtag {
border-bottom: green 2px solid;
border-top: red 2px solid;
}
HTML
<hr id="hrtag"/>
If you want it to be a class then just swap the # for . and id for class. In the CSS, you can change the color to whatever you want. This was tested in Chrome.
Would you try box-shadow,like this:
HTML
<div class="hr"></div>
CCS
.hr{
border-top: 1px solid #111;
box-shadow: 0 1px 0 #292929;
}
Please view the demo.