Reputation: 235
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
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);
}
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
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
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
Reputation: 917
You can set background color to transparent
background-color: transparent;
Upvotes: 0