I would like to have full height left and right borders in my element, but I would like to bottom border to be transparent.
I currently use this:
.graph {
border: 1px solid #ddd;
border-bottom-color: transparent;
}
but the consequence of this is that the left and right borders are missing the bottom pixel:
I would ideally like my graph label element to have full height borders so I don't have that ugly half pixel missing at the bottom.
Is there anything I can do?
Try border-bottom-width: 0; to remove the bottom border entirely.
try border-bottom: none; after the general bordersetting
Try border-bottom-style: hidden; to hide the bottom border entirely.
Related
I have a block(div) with a lineair gradient.
Is it possible to make the top right corner to cut out a triangle?
You have border-radius 5px for instance to make a block with round corners. But is it possible to have a transparant top right corner of 40px?
Thanks for reading
Sorry it is like this:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-top-right-radius&preval=100px
Only not rounded but a sharp corner like a triangle. (Straight line)
<div class="top-block">content</div>
.top-block {
background: lineair-gradient(from top to right, red, blue);
border-top-right-radius: 100px;
}
You can achieve the effect with ::after / :: before elements like this.
.yourelement{
position:relative; // Required.
}
.yourelement::after {
content: "";
position: absolute;
border-left: 40px solid transparent;
border-top: 40px solid #fff; // YOUR BG COLOR
top: 0px;
right:0px
}
You can base the px sizes on the size of your element as you please, also adjust the colors etc.
this essentially places a triangle over your corner to make it appear cut.
I have been searching in goole how to create and arrow and box with css only. I have found an almost perfect example here:-
http://dabblet.com/gist/4639593
How can I change this code so the arrow points left and not right?
I have tried a few things but just get a diamond shape pointing left!
Thanks
change .shape:after's margin to -24px 220px
remove border-top & border-right for .shape:after
add the following borders for .shape:after border-bottom: solid 1px #ccc; & border-left: solid 1px #ccc;
here the final result: http://dabblet.com/gist/5648799
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.
I have a table, in the Table header (TH) I have a background with CSS:
.gridView th
{
padding-top: 1px;
background-image: url('/Images/Design/New/mitte-tb_02.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
color: #FFFFFF;
border: 1px solid Gray;
text-align: center;
}
Now I will right an left from the border 1px space between border and background.
I try all, but it seems useless.
any ideas?
You can achieve this by setting border-collapse on the table to separate and the background colour of the table to Gray. Then set the border of the cells to the colour that you want between the gray border and the background image. See this example: http://jsfiddle.net/NMx5M/
You can put inner div in th element and set background for it with with margin: 0 1px;. An example (I replaced image with color for simplicity).
If I understand you correctly:
By the nature of "background", the image will fill as much of the space as the image size permits (especially if it repeats).
You could force a border using cellspacing or a white border for a visual impression.
Alternatively you will want to make the background image exactly 1px too small around the edges, and position the background absolutely to give the ~impression~ of the gap.
edit
you can perhaps do something like this
.foo {
background: url(bg.jpg) repeat-x;
display:block;
width:99%;
height:99%;
}
<th style="padding:1px;" scope="col"><span class="foo">Foo Bar</span></th>
b