I am trying to construct this shape in CSS:
But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out.
You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the same reason. What am I missing? Thank you in advance.
Simply position the triangle using the right property (which start from the right of the rectangle) instead of the left (which starts from the left of the rectangle and is useless here as you can't know the width of the tags): http://jsfiddle.net/Gv3rf/
Just add a line-height to .tag
.tag {
line-height: 10px;
/* the rest of your styles here */
}
http://jsfiddle.net/ExZFe/3/
Related
i'm working on my personal website and i have an idea. Better it will show as a image.
img
I want to ask how to do the geometry in the header only with css. It must always be the center of the page. Logo could be fixed at the center of the header. Thanks for your answer!
Analysing the design shows it is mostly made up of a lot of triangular shapes, plus three boxes. You can therefore do the whole thing with CSS. The way to create a triangle in CSS is to use a div, give it zero width and height, and a border of a suitable thickness. There are many articles on the web on how to do this, and it has been explained before on StackOverflow as well, with some excellent explanations of the theory behind it.
So there's a lot out there to consult and I won't go into it again at length here. But basically the CSS is like:
.triangle {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 50px solid green;
margin : 0;
padding : 0;
}
This particular example produces a right angled triangle with one side sloping in the direction of the main diagonal in your design - i.e. from bottom-left to top-right. Making border-left and border-bottom the same length would produce a diagonal at 45 degrees, but in your design it's a different angle, so I've used different lengths. You can experiment to get exactly the slope you want. Whether you use border left, right, bottom, or top decides the orientation of the triangle.
Having achieved that main diagonal, identify the other triangles in the design and create some more, smaller divs and add similar CSS. You can then overlay them on top of the design using absolute positioning, and a bit of z-index if needed. One bit of the stuff in the center will also need a tiny rectangular div putting on top of the triangles.
It's as neat an exercise in CSS triangles as ever I've seen, but I'll leave you to work out the details!
I'm trying to get 2 div's next to eachother with a diagonal space between them.
I've seen multiple tutorials en stackoverflow's about diagonal divs, but they all do this by using 2 borders for the div with a solid color and use the diagonal line those create. But I want to have pictures/background image instead of a solid color. And maybe even other content like text that go's under the diagonal line. And that's not possible when using borders, as a border is outside the div. (floatright with overflow hidden or something for the content.)
Could anybody here give me a hint how to achieve this?
My tests all ended with nothing close to wat I want.
Something like this:
Thanks a lot if anybody could point this out for me.
add following style to the second image
<style>
.img2{
margin-right:-10px;
}
<style>
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
I am trying to construct this shape in CSS:
But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out.
You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the same reason. What am I missing? Thank you in advance.
Simply position the triangle using the right property (which start from the right of the rectangle) instead of the left (which starts from the left of the rectangle and is useless here as you can't know the width of the tags): http://jsfiddle.net/Gv3rf/
Just add a line-height to .tag
.tag {
line-height: 10px;
/* the rest of your styles here */
}
http://jsfiddle.net/ExZFe/3/
I want the black and white squares that share a tile/cell to overlap. The tile/cell blocks (There will be more, ideally) should fill the container of arbitrary size from left to right before going to the next row. What am I doing wrong? I thought left to right was default, but I know I am overriding some defaults with absolute positions.
http://jsfiddle.net/Hc7af/
Thanks!
.cell{
...
float: left;
}
Is this what you mean?
Also if you change the p element to a div it will fix the no-wrapping issue. I suspect it has to do with default styles.