There is this triangle that is made with css: http://jsfiddle.net/W3hNx/1/
How can I make it face up? :)
Thanks!!
Just change border-top to border-bottom in .triangle. updated jsFiddle
Change
border-top: 30px solid green;
to
border-bottom: 30px solid green;
in .triangle selector.
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 30px solid green;
this will make the triangle face up
Related
I have looked at similar questions asked before and did not find this to be the same.
I wanted to create row border on hover and added css with left and right borders for the first and last cells in the row respectively.
My HTML:
<table>
<tr><td>1111111</td><td>22222222</td><td>3333333333</td></tr>
<tr><td>4444444</td><td>55555555</td><td>6666666666</td></tr>
<tr><td>7777777</td><td>88888888</td><td>9999999999</td></tr>
</table>
My css:
table {
border-collapse: seperate;
border-spacing:0;
}
tr:hover td {
border-top: 1px groove #E8E8E8;
border-bottom: 1px groove #E8E8E8;
}
tr:hover td:first-child {
border-left: 1px groove #E8E8E8;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
tr:hover td:last-child {
border-right: 1px groove #E8E8E8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
But adding the border radius makes the border for the cells on the ends lighter.
I have created a JSFiddle for it at Border radius changes color
I have been using Chrome 55 which changed the color for the first and last cells, but only on top. Using Safari 10 changes the color for both bottom and top borders.
I'm not quite sure, but it seems to be some wonky anti-aliasing, worsened by the use of a groove at 1px. Using either a groove at 2px or a solid 1px seems to fix it, although it still lops off a bit on the sides. Is that intentional or also unwanted?
try this css code
table {
border-collapse: seperate;
border-spacing:0;
}
tr:hover td {
border-top: 1px groove #E8E8E8;
border-bottom: 2px groove #E8E8E8;
}
tr:hover td:first-child {
border-left: 1px groove #E8E8E8;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
tr:hover td:last-child {
border-right: 2px groove #E8E8E8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
change the right and bottom borders width to 2 pixels
I'm using border-top and border-left on a zero-width element to create a triangle.
.triangle {
border-top: solid 100px red;
border-left: solid 100px blue;
width: 0;
margin: 10px;
}
.borderRadius { border-radius: 10px; }
<div class="triangle"></div>
<div class="triangle borderRadius"></div>
However if a border-radius is applied to the element, the red border turns blue!! See JSfiddle here: https://jsfiddle.net/brentonstrine/3z3gqwts/
What is happening here? Is there a way to get a rounded-corner on my triangle?
To get a rounded border on your triangle you might have to declare all borders:
div {
border-top: solid 50px red;
border-right: solid 50px red;
border-left: solid 50px blue;
border-bottom: solid 50px blue;
width: 10px;
height: 10px;
}
DEMO
Just a short question
Is there a shorter way of writing this code so that all 3 are covered in one rule?
border-left: 2px solid #006699;
border-right: 2px solid #006699;
border-bottom: 2px solid #006699;
You would use the border shorthand and then set border-top to none. (example here)
border: 2px solid #006699;
border-top: none;
Is there a way to make the border bigger than the div that it's attached to? For example, if the div dimensions were 10x10, could I make the border 20x10?
Yes you can:- check this link - http://jsfiddle.net/QnTqh/2/
div{
width:100px;
height:100px;
border:1px solid red;
border-width:200px 200px 10px 10px;
}
You can use the following to control each side independently:
border-top: 10px solid #000;
border-right: 20px solid #000;
border-bottom: 10px solid #000;
border-left: 20px solid #000;
Or make them all the same:
border: 20px solid #000;
Is there a way of combining border-top,border-right,border-left,border-bottom in CSS like a super shorthand style.
eg:
border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
No, you cannot set them all in a single statement.
At the general case, you need at least three properties:
border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;
However, that would be quite messy. It would be more readable and maintainable with four:
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
Your case is an extreme one, but here is a solution for others that fits a more common scenario of wanting to style fewer than 4 borders exactly the same.
border: 1px dashed red; border-width: 1px 1px 0 1px;
that is a little shorter, and maybe easier to read than
border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red;
or
border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;
I can relate to the problem, there should be a shorthand like...
border: 1px solid red top bottom left;
Of course that doesn't work! Kobi's answer gave me an idea. Let's say you want to do top, bottom and left, but not right. Instead of doing border-top: border-left: border-bottom: (three statements) you could do two like this, the zero cancels out the right side.
border: 1px dashed yellow;
border-width:1px 0 1px 1px;
Two statements instead of three, small improvement :-D
No you can't set them as single one
for example if you have
div{
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
same properties for all fours then you can set them in single line
div{border:2px solid red;}