这个问题在这里已经有一个答案：>
Shape with a slanted side (responsive)2
我正在尝试创建一个倾斜的标签,以便位于内容部分的上方,并发现了这个很好的例子：
我正在尝试创建一个倾斜的标签,以便位于内容部分的上方,并发现了这个很好的例子：
HTML：
<div class="tab">
<div class="arrow"></div>
</div>
CSS：
body
{
background-color: #666;
}
.tab
{
height: 50px;
width: 150px;
border-radius: 10px 10px 0px 0px;
background-color: #FFF;
position: relative;
}
.arrow
{
border-color: transparent transparent #FFF #FFF;
border-style: solid;
border-width: 23px 23px 23px 23px;
height:0;
width:0;
position:absolute;
bottom:0px;
right:-43px;
}
但是,我想为此形状设置不同的2px边框颜色,不幸的是,该方法不起作用,因为它使用边框创建形状的右侧.
任何关于我如何可以修改它的想法？
解决方法
你可以尝试这种方法：
jsFiddle
而不是使用边框创建倾斜效果,我使用：after伪元素来创建它.这允许我在其周围设置边框.然后我使用：before伪元素来隐藏我不想看到的边框. CSS中的循环2px派生自边框宽度值.
CSS
.tab:before {
height: 50px;
width: 10px;
display: block;
content:" ";
background-color: #FFF;
position: absolute;
right: -2px;
top: -2px;
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
.tab {
height: 50px;
width: 150px;
border-radius: 10px 10px 0px 0px;
background-color: #FFF;
position: relative;
border: 2px solid blue;
}
.tab:after {
display: block;
content:" ";
width: 100px;
height: 50px;
top: -2px;
background-color: #FFF;
position: absolute;
right: -29px;
transform:skewX(45deg);
-ms-transform:skewX(45deg);
-webkit-transform:skewX(45deg);
border: 2px solid blue;
z-index: -1;
}
