CODEWITHSUNDEEP
htmlcssbordershapescss-shapes
saratogahiker
saratogahiker

Reputation: 235

CSS Shapes with only a Border

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.

Upvotes: 2

Views: 10601

Answers (4)

vals
vals

Reputation: 64264

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

Upvotes: 1

David Zukowski
David Zukowski

Reputation: 21

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?

Upvotes: 0

Ryan
Ryan

Reputation: 257

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.

Upvotes: 0

Alen
Alen

Reputation: 917

You can set background color to transparent

background-color: transparent;

Upvotes: 0

Related Questions