I want to make a speech bubble like the image below with an outline/border. The arrow is a square with two borders, rotated by 45 degress.
It does work, but the borders do not connect perfectly, as you can see when you zoom in.
Is this even cleanly solvable with CSS? If not, how would you solve it?
Source: https://levelup.gitconnected.com/how-to-create-simple-triangle-borders-with-css-665d26372825
I think you can probably just shift it outwards by one pixel to fix this, i.e. change top: -12px to top: -13px
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 have created a css rotating tetrahedron and now the only thing that prevents me from being happy is that I see that jogged line of the bottom polygon. Here is a jsfiddle: http://jsfiddle.net/mikeonly/uxy9x23n/.
Obviously, I want it to be antialiased. And what I have already tried is fixing it with:
scale(.9999)
adding padding
rotating the bottom polygon in different plans
setting the color of borders in rgba
creating outline: 2px solid transparent
Let me know in case the line is smooth for you. Also, there is a screenshot of that issue when I view it in the latest Chrome: http://imgur.com/nyKKTDb.
Thanks.
I have built 3 little cubes in CSS and grouped them in a line within a div #first_line_of_cubes at the very bottom of CSS file. You can see it here: http://jsfiddle.net/ZVVK3/ (I think it works only in Chrome, since there aren't all the neccesary prefixes)
Now I want to rotate the line #first_line_of_cubes by using:
-webkit-transform:rotateY() rotate(x)
The problem is that ir rotates around left hand side corner of grouped cubes, but I want it to rotate around the center of grouped cubes.
So far Google said that solution is -webkit-transform-origin property, but I can't get any kind of effect with any values I have tried. What's the problem and how can I make it rotate around it's center?
If there isn't CSS solution, JavaScript/jQuery is also fine.
For me it in Chrome version 27 setting the origin seems to work fine, although it seems like the center isn't quite where I think it is:
http://jsfiddle.net/MRpUb/
-webkit-transform-origin:300px 0px 0px;
I am trying to recreate that Google-style toolbar on G-mail and a few other Google services.
I have tried doing this as both a formatted list and nested div elements in one container but I have the same problem each time.
When you mouse over, the new 1px border moves all the other elements around and I have to apply stuff like:
left: -1px;
bottom: 1px;
Which is all well and good for the element currently :hover'd, all the rest move around and it looks ugly.
So I guess my question is:
Is there any way to display things such that a new 1px on :hover, will not alter the positioning, while still displaying these elements WITHOUT absolute positioning.
Obviously if the only avenue is absolute positioning where I have to put in pixel co-ordinations then sure, but there has to be a more elegant way.
You can do several thing to avoid the 1px border shifting things around on hover.
http://jsfiddle.net/ZeikJT/tBmm2/
One solution is to add a transparent border (border:1px solid transparent) so that there is always a gap. This will work in pretty much all situations. It also allows you to then simply change the border-color on hover and not re-specify the border-width so you won't ever need to make changes in two places if you decide to change the width.
http://jsfiddle.net/ZeikJT/NkBwp/
Another solution is to add a margin or padding that then gets taken out on hover. This is a little trickier to get working properly but can work just as well.
I'm getting a tiny rounded corner halo effect that I'd like to get rid of. In this example, look for the effect in the red circle. Here's a zoom in of the effect:
I seem to recall a while back reading an article on just this problem. Anyone have a link to that article? Otherwise, any good ways to get rid of the halo?
It is being caused because the dl has all four corners rounded. This allows the bottom of the dl to be rounded. The dt sits over the dl and has its top left and top right corners rounded. But there is a slight overflow of the dl curve behind the dt curve, causing the halo.
My solution is to increase the border-radius of the dl so that it is hidden behind the dt corner. But it seems like a hack and adds a fair amount more CSS. I'm wondering if there is a better solution. Here it is without the halo:
If you don't mind a 2 pixel discrepancy you could add...
div.content dt.top {
position: relative;
top: -2px;
}
But I think your solution is good, it can be improved by using the shorthand version of border radius:
http://jsfiddle.net/DAjWS/
border-radius: [topleft] [topright] [bottomright] [bottomleft]
The article you are mentioning probably has to do with the combination of border with border-radius (it produces a halo similar to yours), but in your case it's expected. The same thing would happen in a vector editing app if you overlapped two boxes with rounded corners. you just have to find an elegant way of covering the anti-aliasing of the bottom box.
I just came across the article that I mentioned in my question. It was linked to from html5boilerplate.com. Essentially, the following webkit CSS will get rid of the bleed (or halo as I called it):
-webkit-background-clip: padding-box;