9

コンテンツ セクションの上に配置する角度の付いたタブを作成しようとしていますが、この素晴らしい例に出くわしました。

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 の境界線の色を設定したいのですが、残念ながら、境界線を使用して形状の右側を作成するため、この方法は機能しません。

どのように改造できるかについてのアイデアはありますか?

4

1 に答える 1

15

このアプローチを試すことができます：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;
}
于 2013-05-29T23:02:20.647 に答える