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
Related
I can change the top, left, right and bottom of borders using the setStyleSheet funcion:
self.button1.setStyleSheet("""border-bottom: 1px solid #654321; border-top: 1px solid #123456""")
and this creates a button like so:
However is it possible to create borders like the one below using qss stylesheets:
Where the bottom border in only not starting at the very edge.
Well, it is possible, but only whenever the following aspects are respected and considered:
both vertical borders are always explicitly hidden (border-left and border-right are set to none);
the border radius is only specified for the bottom corners, and it only sets the horizontal radius, while leaving the vertical one to 0;
this is a "hack" that specifically uses geometry aspects and only works if the above are respected;
bottomMargin = 24
self.button1.setStyleSheet("""
QAbstractButton {{
border: 1px solid black;
border-left: none;
border-right: none;
border-bottom-left-radius: {margin}px 0;
border-bottom-right-radius: {margin}px 0;
}}
""".format(margin=bottomMargin)
i am building a page, and in the css i set a border of 1 pixel. But in the frontend, the border-height is incosistent.
The last border stripe is definitley bigger then the others.Does anybody know why this is?
CSS: border: 1px solid rgba(0,0,0,.125)
You can try with the property outline.
outline: 1px solid rgba(0,0,0,.125);
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.
This question already has answers here:
CSS Double Border with outer border thicker than inner border
(5 answers)
Closed 8 years ago.
Is it possible with a single CSS?
Having a double border, the inner border is thin while the outer border is thick?
Having two different element with different border thickness is simple.
But I'm trying to find a way to make it a single element.
If you can use any other CSS property then you can use the following code.
border: double 3px black;
outline: solid 1px black;
It will produce a 1px inner and 2px outer "border"
Something like below??
You can use outline
Outlines allow both a border and an outline to be applied to a single element.
FIDDLE DEMO
<div class="border"></div>
CSS
.border {
border: 1px double #000;
outline: 5px solid #699;
outline-offset: -9px;
width:200px;
height:200px;
}
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.