只有边框的CSS形状

时间:2013-07-30 19:21:30

标签: html css border shape css-shapes

我已经找到了有关如何使用CSS创建各种形状(如梯形和心形)的信息;然而,它们是坚固的形状。有没有办法创建一个透明的形状,如梯形,只显示轮廓/边框?

通过制作两个形状并重叠它们,一个比另一个大,可以使它看起来具有这种效果,但这只有在形状背后的背景是纯色时才有效,这可能并不总是如此是这样的。因此透明度的原因。

有关CSS形状的示例:link;例如,看三角形。

谢谢。

4 个答案:

答案 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);
}

fiddle

根据您的要求,基本元素的背景是透明的。我在身体中设置了一个渐变来验证它。

你添加2个伪元素,它们设置了边框(内部边框除外),并且倾斜以实现梯形