Question

我在HTML / CSS中制作了类似标签的形状，如此处所示 - http://jsfiddle.net/RuXyP/

.tag {
float: left;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}

我试图为它添加一个轮廓并且已经达到了这个目标 - http://jsfiddle.net/RuXyP/1/

但是，我正在努力研究如何在箭头位添加轮廓。我无法使用边框作为箭头的创建方式我不能使用大纲，因为它不能为个别方面指定

有没有办法做到这一点？

Answer 1

我更喜欢不使用伪选择器，而只是使用两个div作为三角形，一个比另一个大1px，你只需在第二个div上移动边距。像这样：

.arrow-border {
    width: 0;
    height: 0;
    float: left;
    margin-top: 1px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #FF00FF;
}

.arrow-right {
    width: 0;
    height: 0;
    float: left;
    margin-left: -9px; /* Width of .arrow-border's border */
    margin-top: 2px;
    border-top: 8px solid transparent; /* One less than .arrow-border's border width */
    border-bottom: 8px solid transparent;
    border-left: 8px solid #2e353d;
}

演示：http://jsfiddle.net/RuXyP/4/

Nit：请记住，如果将其放入小于箭头的容器中，则箭头可能会脱落。一般来说，这不应该是一个问题。

Answer 2

你可以使用伪元素和绝对位置：

这个想法是将伪：堆叠在彼此顶部之前和之后，并在每一边绘制一个大于1像素的一个。设置下面最大的颜色以绘制红色边框颜色。

<强> DEMO

    .tag {
    float: left;
    position:relative;
    text-align: center;
    height: 14px;
    width: 110px;
    background-color: #2e353d;
    color: #FFFFFF;
    padding-top: 2px;
    margin-top: 1px;
    font-size: 10px;
    border: 1px solid #FF00FF;
    border-right: none;
}
.tag:after, .tag:before {
    content:'';
    margin-right:-10px;
    width: 0;
    height: 0;
    position:absolute;
    top:0px;
    left:100%;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 8px solid #2e353d;
}
.tag:before {
    top:-1px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 9px solid #FF00FF;
}

标签形状的轮廓

2 个答案: