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.

Answer 1

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