我发现了CSS形状,我很感兴趣,是否有办法为它们(形状)制作边框(实线、虚线、点线)?
我首先想到的是制作另一个形状,并通过z-index将其放置在背景上(http://jsfiddle.net/gYKSd/),但这只会产生实线边框效果。
HTML:
CSS(层叠样式表):
我首先想到的是制作另一个形状,并通过z-index将其放置在背景上(http://jsfiddle.net/gYKSd/),但这只会产生实线边框效果。
HTML:
<div class="triangle"></div>
<div class="background"></div>
CSS(层叠样式表):
.triangle {
position: absolute;
top: 14px;
left: 10px;
height: 0px;
width: 0px;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid red;
z-index: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
border-right: 60px dotted transparent;
border-left: 60px dotted transparent;
border-bottom: 120px dotted gray;
z-index: -1;
}