如何在CSS中创建带有边框的倾斜标签？

这个问题在这里已经有一个答案：> 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;
}

http://jsfiddle.net/P3P3Z/2/

但是,我想为此形状设置不同的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;
}

原文地址：https://www.jb51.cc/css/214200.html