我已经找到了有关如何使用CSS创建各种形状(如梯形和心形)的信息;然而,它们是坚固的形状。有没有办法创建一个透明的形状,如梯形,只显示轮廓/边框?
通过制作两个形状并重叠它们,一个比另一个大,可以使它看起来具有这种效果,但这只有在形状背后的背景是纯色时才有效,这可能并不总是如此是这样的。因此透明度的原因。
有关CSS形状的示例:link;例如,看三角形。
谢谢。
答案 0 :(得分:0)
您可以将背景颜色设置为透明
background-color:transparent;
答案 1 :(得分:0)
这些形状通常在css中完成的方式是通过边界操作。当你有一个透明的梯形时,它只是一个长方形,边缘被边缘折断。因此,没有办法使用统一的边框并保持相同的形状。
答案 2 :(得分:0)
您目前的代码是什么样的?你应该只能为它添加一个边框而没有背景颜色。示例:http://jsfiddle.net/tBBkg/
重叠透明形状(带边框):
#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;
}
也许我不能正确理解这个问题,在哪种情况下你能澄清一下吗?
答案 3 :(得分:0)
这通常是通过边框技巧完成的,而这些对这个
并没有多大帮助你需要其他技术。
例如,请参阅此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);
}
根据您的要求,基本元素的背景是透明的。我在身体中设置了一个渐变来验证它。
你添加2个伪元素,它们设置了边框(内部边框除外),并且倾斜以实现梯形