All Questions

1539
votes
17answers
108120 views

How do CSS triangles work?

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle: #triangle-up { width: 0; height: 0; border-left: 50px solid tra...
71
votes
2answers
7304 views

Shape with a slanted side (responsive)

I am trying to create a shape like in the image below with a slanted edge on only one side (for example, the bottom side) while the other edges remain straight. I tried using the border method (cod...
29
votes
2answers
18471 views

Line before and after title over image

I want to create a line before and after a centered title. The line and text must have a transparent background to be able to position them on a uneven background. The line must not be 100% width, lik...
44
votes
3answers
31521 views

Transparent arrow/triangle indented

I would like to make a transparent arrow over an image. This triangle should be indented in a block and show the background image. Desired output: CSS: .barShow { background-color: #000; ...
22
votes
2answers
5900 views

Speech bubble with arrow

I have a project where I need to insert speech bubbles / message boxes. The general shape I am trying to achieve is this one : .bubble { height: 100px; width: 200px; border: 3px solid ...
5
votes
2answers
1037 views

Element will not stay centered, especially when re-sizing screen

My problem is that I cannot horizontally center a triangle pointer. Well, I can center the pointer for some window sizes, but when I shrink or extend the window it places it in the wrong place again....
25
votes
9answers
33510 views

Responsive grid of hexagons

I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid? <div> <img src="link" class="Image"> </d...
73
votes
11answers
52485 views

Transparent text cut out of background

Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS? It would be sad to lose all precious SEO because of images replacing text. ...
15
votes
7answers
5745 views

Transparent half circle cut out of a div

I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must be black or transparent. I cannot use a black rec...
83
votes
2answers
88839 views

CSS triangle custom border color

Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 si...

Previous Next