如何在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.

任何想法如何我可以mod

Any ideas on how I could mod it?

推荐答案

您可以尝试这种方法： jsFiddle

You can try this approach: jsFiddle

不使用边框创建倾斜效果使用：后伪元素创建它。这允许我设置它周围的边框。然后我使用：之前伪元素隐藏我不想看到的边框。 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屋！