I have a table. Inside that table some td have the class "arrow". For the td that have this class I would like to put an arrow (triangle) on the left border of that td. I would like to use only css to achieve that. Note that I wish the arrow to start below the top border and end above the bottom border. I tried to apply several "pure css arrows tutorials" I found on the internet but I do not manage to make it work on td. I hope I was clear and I hope someone might help. Thank you in advance for your replies. Cheers. Marc.
http://cssdesk.com/PzASe
My HTML :
<table>
<tr>
<td>td1</td>
<td class="arrow">td2</td>
<td class="arrow">td three</td>
</tr>
<tr>
<td>td4</td>
<td class="arrow">td five</td>
<td class="arrow">td6</td>
</tr>
</table>
My CSS:
table{
border-spacing: 0px;
border-collapse: collapse;
text-align:center;
vertical-align:middle;}
td{
padding:10px;
border:1px solid purple;}
.arrow:before {
content:'';
position: relative;
top: 0;
left: -10;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-left: 5px solid black;
}
What is your target audience with this? Most of the CSS techniques for drawing shapes like triangles involve things like insert new elements, and advanced CSS properties (read: don't work in IE), I would suggest biting the bullet and using an old-fashioned background image.
If you're doing it as a proof of concept, and you don't care what browser a visitor is using, have you looked at this tutorial on CSS tricks?
You would need to insert a <div> into those cells, and then apply styling like this:
.arrow div {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
}
Try this css. Your td was center aligned which added that odd space before your arrow. (see it in action here css code
table{
border-spacing: 0px;
border-collapse: collapse;
text-align:center;
vertical-align:middle;}
td{
padding:10px;
border:1px solid purple;}
.arrow:before {
content:'';
position: relative;
top: 0;
left: -10;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-left: 5px solid black;
}
.arrow {
text-align:left;
}
Related
I want in a table in html a border left.
Here is the table
.weTable td{
border-color:#dcdcdc;
border-width:1px;
border-style:solid;
}
This is for the table cell and this has the table
border-left: 15px solid #548dd4;
My problem is I want a vertical line left and its not a straight line on this way.
Now:
What I want:
try this one?
table {
border-left: 15px solid #548dd4;
border-spacing: 0px;}
The problem is caused by the fact that borders meet at an angle so unless you remove the border from the top you cannot get straight 'joins'.
As an alternative, you could add extra padding-left to the cell and use an inset box-shadow like so.
table {
border-collapse: separate;
border-spacing: 5px;
margin: 1rem;
text-align: center;
}
table td {
width: 50px;
border-color: black;
border-width: 1px;
border-style: solid;
padding: 50px;
padding-left: 65px;
position: relative;
}
table td {
box-shadow: inset 15px 0 0 lightblue;
}
<table class="shadow">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
Could someone please explain why do I have such a curved border as outlined on the picture attached?
Here is my CSS:
.fourth-article-category {
border-bottom: 4px solid #5692b1;
}
article {
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
And also HTML:
<article class="fourth-article-category">
<img src="img/article_4_photo.jpg" width="470" height="345" title="A-Rod, A Fraud, And A Waste Of
Yankees Money, Public's Time" />
<section>
<div class="article-info"> <span class="date">25 July 2013</span> <span class="comments-quantity">6 Comments</span> </div>
<div class="article-preview">
<h3>A-Rod, A Fraud, And A Waste Of
Yankees Money, Public's Time</h3>
<p>Enough already. I can’t take it no more. Free us from enslavement
to all this banter. OK, so my fit of anger this morning is not steroid-
induced…though that would be fitting in light of recent discussions.
Baseball talk of late has centered upon performance enhancing
drugs. Biogenesis has become the new BALCO. A-Rod the new
Barry Bonds. And all I hear from various media types are
questions like.</p>
</div>
</section>
</article>
The border isn't curved, it's at an angle.
All borders meet an angles.
See this demo - JSfiddle
.box {
width:50px;
height:50px;
margin:50px;
border:25px solid red;
border-bottom:25px solid blue;
}
Because you are using a single pixel border you are encountering sub-pixel rendering issues.
EDIT -
As an alternaive you could use a box-shadow instead of a bottom border
CSS
.box {
width:50px;
height:50px;
margin:50px;
border:5px solid red;
border-bottom:none;
box-shadow: 0 5px 0px 0px black;
}
Box-Shadow Demo
It's absolutely normal: You have different border-width values and different border-color values for horizontal and vertical borders.
Since the edge between these is angled, your 'curvature' appears. See it here in action: http://jsfiddle.net/qqTc2/4/ (the 'hover' bit)
You could do better, if you used two outer divs, which form the borders.
The outer div is top and bottom, and the inner is the left and right border.
<div class="outer">
<div class="inner">Better</div>
</div>
.outer {
border: 4px solid black;
border-left-width: 0;
border-right-width: 0;
width: 102px;
}
.outer .inner {
border: 1px solid lightGray;
border-top-width: 0;
border-bottom-width: 0;
height: 100px;
text-align: center;
line-height: 100px;
}
its not curved.. if you use same border color all 4 sides you can identify that
LINK
CSS:
.fourth-article-category {
border-bottom: 4px solid #5692b1;
}
article {
border-left: 1px solid #5692b1;
border-right: 1px solid #5692b1;
border-radius:0;
}
CSS :
.outer-element {
border-bottom: 4px solid #5692b1;
border-radius: unset;
OR
border-radius: 0px;
}
.outer-element inner {
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
I think this should work for u.
i apply a border-radius to my table but it's not working
CSS :
table {
border: 1px solid;
border-radius: 10px;
border-collapse: collapse;
}
here's a FIDDLE
PS. i want to use border-collapse: collapse not border-collapse: separate
Did you try removing border-collapse: collapse?
table {
border: 1px solid;
border-radius: 10px;
}
remove your border-collapse
table{
border: 1px solid;
border-radius: 10px;
}
Edit this in your table:
table {
border: 2px solid black;
border-radius: 10px;
overflow:hidden;
}
And here is the edited fiddle: http://jsfiddle.net/piyushkmr/TExvf/7/
Box properties only works with DIV tag. you can do that if you want to create your table with DIV.
Is it possible to recreate a box like this without using background images and only one element?
Ideally, I'd be able to control which corners are darkened by adding a class, so the above image might be class="box dark-top dark-left dark-bottom dark-right". I can darken two by using :before and :after, but am having problems thinking of a good way to darken three or four corners without adding additional markup.
Here's a way to darken all four corners with one element, though I haven't figured out how to darken specific corners yet. But my theory was to have the original border as the dark border, and then /lighten/ the sides of the box with pseudo-elements.
Fiddle: http://jsfiddle.net/KZSLH/
.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
It's far from perfect, but this is the only way I could think of to do something like that... You'll want to play around with the border thickness, border radius and which borders are rounded to really have it suit your needs
The only thing I couldn't figure out is how to get the edges of the corners to be sharp rather than tapering off... Maybe someone could contribute that part?
First, start off with two overlapping div elements:
<div id="thick" />
<div id="thin" />
Then, use rounded corners and relative positioning to taper off and create the "bold" corners.
#thick {
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:white;
border:3px solid black;
}
#thin {
position:relative;
top:-2px;
left:-2px;
height:104px;
width:104px;
background-color:white;
border-radius: 15px;
}
Here is a fiddle: http://jsfiddle.net/bGrdA/
And credit to this post for giving me the idea.
I think I figured it out. The key is that there must be content inside of the box in it's own element, which will always be the case my scenario.
Example: http://jsfiddle.net/n7pgP/
The classes that can be added to the box are:
dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right
Some thing this can be tried out for two elements
http://jsfiddle.net/V8jmR/
#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
Original answer
CSS - show only corner border
The only possibility I know is in using additional elements:
<div class="box">
<span class="darkTopLeft"></span>
<span class="darkTopRight"></span>
<span class="darkBottomLeft"></span>
<span class="darkBottomRight"></span>
</div>
.box {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
position: relative;
width: 100px;
}
.box > span {
height: 10px;
position: absolute;
width: 10px;
}
.darkTopLeft {
border-left: 1px solid #000;
border-top: 1px solid #000;
left: -1px;
top: -1px;
}
.darkTopRight {
border-right: 1px solid #000;
border-top: 1px solid #000;
right: -1px;
top: -1px;
}
.darkBottomLeft {
bottom: -1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
left: -1px;
}
.darkBottomRight {
bottom: -1px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
right: -1px;
}
http://jsfiddle.net/cM7xU/
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle