How to draw vertical line and horizontal markers - html

How can I make a vertical line and horizontal markers (an L shape) using CSS:
something like:
Test
L T2
L t3


You don't need a div for this, because you have pseudo-elements! Here's a quick example I threw together, and you can find a working sample here: http://jsbin.com/aladez/2
HTML:
<ul>
<li>Herp</li>
<li>Derp</li>
<li>Derp</li>
</ul>
CSS:
li {
list-style: none;
}
li:before {
content: "";
position: relative;
top: -6px;
font-size: 4px;
line-height: 4px;
padding: 4px 8px 0 0;
margin: 0 10px 0 0;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}


Create a div with the following css:
width: 20px; //or whatever width you want for the horizontal line
height: 40px; //or whatever height you want for the vertical line
border-bottom: 1px solid black;
border-left: 1px solid black;
and plant it where you want.


Well, you could add a div and set the border as div { border-left: 1px solid; border-bottom: 1px solid; }. Adjust width and height of that div till it fits your needs. You would also want to make sure that you set float: left for the div.
I don't think there is a solution in html which works OOTB.

Related

How to reduce the height of one side of a square of a div element

I've got the following div element and I'd like the height on the right to be the number of pixels I specify e.g 5px. How can I achieve that?
Html
<div class="square"></div>
css
.square {
height: 14px;
width: 14px;
border: 2px solid #4faadf;
}

Try this one!
.square {
width: 0;
height: 0;
border-top: 5px solid #555;
border-left: 14px solid #555;
border-bottom: 9px solid transparent;
}
<div class="square"></div>
If you want to change the right side height of the div, you should have to set that value to border-top and remove that value from the border-left value and set it to the border-bottom value. Just like below one. In here, I have set the right side height to 2px.
.square {
width: 0;
height: 0;
border-top: 2px solid #555;
border-left: 14px solid #555;
border-bottom: 12px solid transparent;
}
<div class="square"></div>
Thanks and best regards!

Why do my standard CSS Triangles have their points cut off?

So I have the following two triangles:
The points are cut off, but my code is literally just this:
.navCaret {
position: relative;
float: right;
right: 5px;
top: 5px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
}
.navCaretOL {
position: relative;
float: right;
right: 9px;
top: 9px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
}
And as you can see in this JSFiddle, it actually DOESN'T cut the edges off when rendering these triangles in a JSFiddle.
All in all this could not be a more standard way of creating a pure CSS triangle and has worked for me many, many times. Anyone have any idea what could be causing this strange behavior? Thanks.
EDIT: By the way, confirmed to behave the same way in IE and Chrome, both latest versions.

OMG I just figured this out by going through my page and deleting each CSS rule line-by-line. Apparently the problem was caused by the following rule:
div.navUpper * {
padding-top: 4px;
}
'.navUpper' is the container my carets were in. The '*' selector was applying 4px padding to them -- the effects of which can be seen here: https://jsfiddle.net/6f4yxp4e/8/
Thanks again to those who responded -- you were both right in different ways.

The triangle is only pointy when the border stretches all the way to the center, meaning anything altering the content box has to be 0 - this includes width/height and padding. Check for other css rules that overwrite your height: 0; or add some padding.
.navCaret {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
outline: 1px solid red; /*for illustration purposes only*/
}
.navCaretOL {
height: 0;
width: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
white-space: nowrap; /*for illustration purposes only*/
outline: 1px solid red; /*for illustration purposes only*/
}
<div class="navCaret">height != 0</div>
<br>
<div class="navCaretOL">height == 0 (content is overflowing)</div>

How to create breadcrumb shape

I've been trying to create a breadcrumb in the shape of an arrow that has a point on one end and a tail at the other.
Basically, the layout is: [tail][body][point], where tail & point are just triangles.
I managed to create [body][point] using css, but i'm stuck trying to make the tail to work. Can this also be done with css?
DEMO: https://plnkr.co/edit/mQELiNgVCe6ZoTepCtr9?p=preview
The HTML:
<div style="font-size:0">
<div class="arrow-tail"></div>
<div class="arrow-body">HELLO WORLD!</div>
<div class="arrow-point"></div>
</div>
The CSS:
.arrow-point {
display: inline-block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 15px solid #777777;
}
.arrow-body {
font-family: verdana;
font-size:15px;
display: inline-block;
background-color: #777777;
color:white;
padding:2px 6px 2px 16px;
height:20px;
vertical-align:top;
}
.arrow-tail {
float:left;
display: inline-block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 15px solid #EEEEEE;
}

Its a bit difficult to understand how you want the final result to look like based on the information you provided in the original post. But I make some guesses and I believe that you want it to look like this:
You can achieve this by setting the tail to position: absolute.
The final CSS of the tail would be this:
.arrow-tail {
position: absolute;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 15px solid #fff;
}
Also note that if you want to move around your tail with the top:, right:, bottom:, left: attributes then you need to make sure that the container div is set to position: relative.

How to pixel-perfect mockup this border?

I'm trying to mockup this design:
But, I can't render the red border correctly. I tried with the obvious solution:
border: 1px solid #939393;
border-left: 4px solid red;
But It's affected by the top and bottom borders, leaving the red stripe with diagonal corners, as you can see in this fiddle:
http://jsfiddle.net/anp0e03k/
Is there any way correct way to fix this?
The only thing that I can think is to add a div inside with red background and negative margins on top and bottom, but it seems to be an overkill and would love to find something that doesn't ruins the html semantic.

Apply the left border to a :before pseudo element of the div and remove the divs left border.
Compatibility: All modern browsers and IE8 +
Give the :before
height: 100% to span the entire height of your div
margin-top: -1px to overlap the top border
padding-bottom: 2px to overlap the bottom border
Then use either
position: absolute on the :before with position: relative on the div like this example:
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
position: relative;
}
div:before {
content: '';
display: block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
position: absolute;
top: 0;
left: 0;
}
<div>
</div>
or
display: inline-block for the :before like this example:
Note: You will probably want to use vertical-align: top / middle / bottom for the :before. This example uses the value top.
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
}
div:before {
content: '';
display: inline-block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
vertical-align: top;
}
<div>
There is text in this
</div>
Final result

Double border in CSS with gap in the middle?

Is it possible to somehow create a double border in CSS, with these 2 added customizations:
One line is slightly thicker than the other
There is a small gap between the two lines
This is the kind of border I need:
EDIT:
Guys, I cannot make any changes to my existing HTML code. I can only apply CSS for the existing HTML code. As far as you're concerned, consider I have a div named sampleDiv, and I want to apply the border on the top side of this div (see below).
Secondly, if you're using any technique other than border, please note that I only want to apply the this specialized border on the top side of my sampleDiv div.

pure CSS & Cross browser - the thickness and spacing can be customized
After your latest Edit: this is a Working Fiddle
without changing the markup, top border only.
your HTML:
<div class="sampleDiv">
some content
</div>
new CSS
.sampleDiv
{
border-top: 2px solid black;
padding-top: 1px;
}
.sampleDiv:before
{
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
If you are allowed to change the DOM:
one line anywhere in the markup: Working Fiddle
HTML:
<div class="SpecialLine"></div>
CSS:
.SpecialLine
{
border-top: 2px solid black;
height: 2px;
border-bottom: 1px solid black;
}
full container border: Working Fiddle
HTML:
<div class="SpecialContainer">
<div class="Content">
here goes the content
<div>
</div>
CSS
.SpecialContainer
{
border: 2px solid black;
padding: 1px;
}
.Content
{
border: 1px solid black;
}

There are various ways you can have multiple borders. One way is to use box-shadow, you can specify multiple box shadows to create the effect you want.
Example
box-shadow: 0 0 0 5px black, 0 0 0 7px red;
Update
I have created a jsFiddle to show you how you can create your borders using box-shadow
Fiddle

There's not a specific property or something for this,but you can easily create one.Something like this:
html:
<div id="wrapper">
<div id="middle">put whatever you want here</div>
</div>
css:
#wrapper{
border: 3px solid black;
padding: 1px;
}
#middle{
border: 1px solid black;
}
here's a js fiddle link:
http://jsfiddle.net/roostaamir/GEqLJ/
UPDATE:
so I saw your edit,and here's the first thing that came to my mind(if you have the width of your sampleDiv this will work):
#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}
#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}

Your div: <div class="framed" />
Simple CSS:
.framed {
border: solid 2px #ccc;
box-shadow: 0 0 0 14px #ccc;
outline: solid 8px #fff;
}
Demo Fiddle: http://jsfiddle.net/uRFsD/

The easiest way to do this would be wrapping the main div in a container div for the second line like so:
.inner {
border: 2px solid #000;
}
.outer {
border: 1px solid #000;
padding: 1px;
}
It's not particularly semantic but it's an easy way to get the job done. You could also use border-image if being semantic is important, but it's more complicated. I guess you could also use both border (inner) and outline (outer) on the same div, but that is not ideal since outline isn't technically part of the box model at all as far as I understand it.

HTML
<div></div>
<div></div>
CSS :
div{
display: block;
background-color: #000;
}
div:nth-child(1){
padding: 2px 0;
}
div:nth-child(2){
margin-top: 1px;
padding: 1px 0;
}
Check this fiddle

May be something like below:
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
http://jsbin.com/iWiGEzU/1/edit?html,css,output

Like
demo
css
.outline {
border-top: 2px solid #000;
border-bottom:1px solid #000;
height:3px;
}

CSS
.doubleBorder
{
border: 4px solid black;
padding: 2px;
}
.doubleBorder>div {
border: 2px solid black;
}
HTML
<div class="doubleBorder">
<div>
<p>Hello</p>
<p>World</p>
</div>
</div>
Working demo

Not in pure CSS as far as I know. Instead you could add in a div element to your HTML, set its width to the one below it and set it's border-top, thickness, margin properties to be meet your thicker border requirement.