3

クライアントが自分のWebサイトで、次のようなボックスを要求しています。

ボックスの外観

ご覧のとおり、ボックスの左側には独特の形をした小さな矢印があります。

私はすべてを試し、たくさんのリンクを訪れましたが、それをデザインすることはできません。

問題は、このボックスのサイズが異なり、その画像は常にボックスの中央にあり、境界線の一部を非表示にする必要があることです（uが表示できるように）

助けてください、私はここですべての選択肢がありません。

ありがとう、ヤセル

4

4 に答える 4

9

ここで私はあなたのためにフィドルを作りました：

<div class="box"></div>

.box{
    border:solid 1px black;
    position:relative;
    display:block;
    height:100px;
    width:100px;
    margin-left:5px;
}
.box:before{
    content:"";
    display:inline-block;
    position:absolute;
    border:10px solid black;
    border-color:transparent transparent transparent black;
    top:40px;
}
.box:after{
    content:"";
    display:inline-block;
    position:absolute;
    border:9px solid white;
    border-color:transparent transparent transparent white;
    top:41px;
    left:-1px;
}

ここでフィドルhttp://jsfiddle.net/y5dZj/

他の人が言っ:afterて:before使用したように

-編集：古いブラウザで完全な互換性が必要な場合は、変換を使用しないでください。私の例はIE8でも動作します（7についてはわかりません）

于 2012-12-11T10:41:52.467 に答える
2

これに慣れている

Css

 div{
    position:relative;
      width:200px;
      height:200px;
      background:red;
    }
    div:after{
    content:'';
      position:absolute;
      left:-10px;
      top:50%;
      margin-top:-10px;
      width:20px;
      height:20px;
      background:#fff;
      transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
    }

HTML

<div></div>

デモ

于 2012-12-11T10:37:21.057 に答える
1

これがあなたがそれをすることができる1つの方法です：http：//jsfiddle.net/vKY3x/

<div>
    <span></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus varius felis, sit amet malesuada urna euismod convallis. Donec at diam eros
</div>

div {
    position:relative;
    width:300px;
    padding:30px;
    border:1px solid #ccc;
}

div span {
    display:block;
    width:20px;
    height:20px;
    background:#666;
    position:absolute;
    left:-1px;
    top:50%;
    margin-top:-10px;
}
于 2012-12-11T10:36:11.447 に答える
1

HTML

<div></div>​

CSS

div {
    margin:20px;
    height: 120px;
    width: 250px;
    background-color: #ededed; 
    border:#ccc solid 1px;
    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:42%;
    left:-11px;
    border-right:#ccc solid 1px;
    border-top:#ccc solid 1px;
} ​

ライブデモ

于 2012-12-11T10:52:17.210 に答える