2

次のように、css のみでタグ形状を作成しようとしています。

ここに画像の説明を入力

フォローしようとしていますが、三角形領域の境界線を使用できません。

HTML:

<a href="#">Test</a>

CSS:

a{
    float: left;
    height: 35px;
    position:relative;  
    border: 1px solid red;
    border-right: none; 
    width: 100px;
} 

a:before{
    content: "";
    position: absolute;
    top: -1px;
    right: -18px;
    width: 0;
    height: 0;
    border-color: white white white red;
    border-style: solid;
    border-width: 19px 0 18px 18px; 
}

JSFiddle: http://jsfiddle.net/Sac3m/

4

3 に答える 3

7

代わりに正方形を回転させることもできますが、結果が素晴らしいクロスブラウザーになるとは思えません

変更されたコード:

a {
  float: left;
  height: 35px;
  position: relative;
  border: 1px solid red;
  border-right: none;
  width: 100px;
}

a:after {
  content: "";
  position: absolute;
  top: 4px;
  right: -13px;
  width: 25px;
  height: 25px;
  border: 1px solid red;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
<a></a>

(最新のIE、Firefox、Chromeは問題ないようです)

アップデート

IE8 のサポートが必要な場合は、(元の) 赤い三角形の上に白い三角形を配置してみてください。

a {
  float: left;
  height: 36px;
  position: relative;
  border: 1px solid red;
  border-right: none;
  width: 100px;
}

a:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -18px;
  width: 0;
  height: 0;
  border-color: white white white red;
  border-style: solid;
  border-width: 19px 0 19px 19px;
}

a:after {
  content: "";
  position: absolute;
  top: 0;
  right: -17px;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent white;
  border-style: solid;
  border-width: 18px 0 18px 18px;
}
<a></a>

于 2013-04-16T08:15:37.663 に答える