CSS Shapes with only a Border

Question

I have found information on how to create various shapes, such as trapezoids and hearts, using only CSS; however, they are solid shapes. Is there a way to create a shape, such as a trapezoid, that is transparent and only displays an outline/border?

By making two shapes and overlapping them, with one larger than the other, it is possible to make it appear to have this effect, but that would only work if the background behind the shape is a solid color, which may not always be the case. Thus the reason for the transparency.

For examples of the CSS shapes: link; look at the triangles, for example.

Thank you.

http://stackoverflow.com/questions/8718587/is-it-possible-to-style-a-div-to-be-trapezoidal - This has some stuff pretty close to this. This might contain some OK work arounds for you. — TravJenkins, Jul 30 '13 at 19:24

vals · Accepted Answer · 2013-07-31T10:16:49.950

This is usually done with border tricks, and those are not really helpful for this

You need others techniques for that.

For instance, see this CSS

body {
    background: linear-gradient(90deg, lightblue, yellow)
}

.trapezoid {
    left: 50px;
    top: 50px;
    position: absolute;
    height: 100px;
    width: 500px;
    background-color: transparent;
}

.trapezoid:before {
    content: '';
    width: 57%;
    height: 100%;
    left: -4%;
    position: absolute;
    border-color: red;
    border-style: solid;
    border-width: 3px 0px 3px 3px;
    -webkit-transform: skewX(-20deg);
}

.trapezoid:after {
    content: '';
    width: 59%;
    height: 100%;
    right: -4%;
    position: absolute;
    border-color: red;
    border-style: solid;
    border-width: 3px 3px 3px 0px;
    -webkit-transform: skewX(20deg);
}

fiddle

The base element has the background transparent, as per your request. I have set a gradient in the body to verify it.

The you add 2 pseudo elements, that have the borders set (except the inner one), and that are skewed to achieve the trapezoid

score 0 · Answer 2 · answered Jul 30 '13 at 19:23

0

You can set background color to transparent

background-color: transparent;

answered Jul 30 '13 at 19:23

Alen

897
2
15
33

Thanks, but that won't work in this situation since the shapes are derived from manipulating the borders - and it's the border color that gives the shape its color. There are some good examples at [link](http://css3shapes.com/). – saratogahiker Jul 30 '13 at 19:33

score 0 · Answer 3 · answered Jul 30 '13 at 19:26

The way that these shapes are typically done in css is through border manipulation. When you have a transparent trapezoid it's just a rectangle with the sides lopped off by a border. Because of this, there is no way to use a uniform border and maintain the same shape.

score 0 · Answer 4 · answered Jul 30 '13 at 19:28

What's your current code look like? You should just be able to add a border to it and no background color. Example: http://jsfiddle.net/tBBkg/

Overlapping transparent shapes (with border):

#square {
   width: 140px; 
   height: 140px; 
    border: 2px solid blue;
    position: absolute;
}

#circle {
    position: absolute;
    height: 100px;
    width: 100px;
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
    border: 2px solid pink;
}

Perhaps I'm not understanding the question properly, in which case could you clarify?

For example, see the Triangle or Trapezium examples at [link](http://css3shapes.com/). — saratogahiker, Jul 30 '13 at 19:40

CSS Shapes with only a Border

4 Answers4

fiddle