如何在 CSS 中创建带有边框的倾斜标签? [英] How to create slanted tabs with a border in CSS?

问题描述

我正在尝试创建有角度的标签以位于内容部分上方，并遇到了这个很好的示例:

I am trying to create angled tabs to sit above a content section, and came across this great example:

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 边框颜色，不幸的是这个方法不起作用，因为它使用边框来创建形状的右侧.

However, I would like to set a different 2px border colour to this shape, and unfortunately this method doesn't work as it uses the border to create the right hand side of the shape.

关于如何修改它的任何想法?

Any ideas on how I could mod it?

推荐答案

你可以试试这个方法:jsFiddle

我没有使用边框来创建倾斜效果，而是使用 :after 伪元素来创建它.这允许我在它周围设置边框.然后我使用 :before 伪元素来隐藏我不想看到的边框.CSS 中重复出现的 2px 来源于边框宽度值.

Instead of using the borders to create the slanted effect, I'm using an :after pseudo element to create it. This allows me to set borders around it. Then I'm using a :before pseudo element to hide the borders which I don't want to see. The recurring 2px in the CSS is derived from the border width value.

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;
}

这篇关于如何在 CSS 中创建带有边框的倾斜标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！