2

div 内に矢印を作成する必要があります。矢印を作成しましたが、以下に示すように境界線で視覚効果を得る必要があります

ここに画像の説明を入力

試したサンプルのデモhttp://jsfiddle.net/rLZkf/4/

div {
  margin: 20px;
  height: 200px;
  width: 200px;
  background-color: #c1c1c1;
  border: #000 solid 2px;
  background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -moz-linear-gradient(135deg, transparent 75%, #fff 75%), -moz-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -ms-linear-gradient(135deg, transparent 75%, #fff 75%), -ms-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -o-linear-gradient(135deg, transparent 75%, #fff 75%), -o-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: linear-gradient(135deg, transparent 75%, #fff 75%), linear-gradient(45deg, transparent 75%, #fff 75%);
  background-position: 30px 0, 0 0;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
<div></div>

4

2 に答える 2

4

これには、CSS3の回転プロパティを使用できます。次のように書きます。

div {
    margin:20px;
    height: 200px;
    width: 200px;
    background-color: #c1c1c1;
    border:#000 solid 2px;
    position:relative;
}
div:after{
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:-11px;
    left:10px;
    border-right:#000 solid 2px;
    border-bottom:#000 solid 2px;
}

これをチェックしてくださいhttp://jsfiddle.net/rLZkf/6/

更新しました

これをチェックしてくださいhttp://jsfiddle.net/rLZkf/9/

于 2012-09-28T06:09:53.360 に答える