1

端に矢印のあるボックスを作成するだけです。私はかなり頻繁に試しましたが、残念ながら関連する解決策です。当然、インターネットやウェブサイトで問い合わせましたが、残念ながらヒットしませんでした。したがって、次のことを確認する必要があります。

ここに画像の説明を入力

矢印には、ボックスと同じ境界線と同じ背景色が必要です

だから今見える

.arrow-up {
    width: 10px;
    height: 10px;
    margin-top: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid gray;
}

#log2 {
    height: 250px;
    width: 250px;
    background: white;
    border: 1px groove rgba(0, 0, 0, .35);
    position: relative;
    display: block;
    margin-top: 54px;
    float: left;
    left: 29.965%;
    z-index: 2;
    border-radius: 3.5px;
}

フィドル

私の英語でごめんなさい

4

4 に答える 4

2

更新されたフィドルは次のとおりです: FIDDLE。
このCSSで試すことができます：

#log2 {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 300px;
    padding: 10px;
    margin: 15px auto 0;
    position: relative;
    background: #fff;
}

#log2:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px 0 0 1px;
    width: 15px;
    height: 15px;
    top: -9px;
    right: 19px;
    background: inherit;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

ただし、これにはtransform新しい機能であるプロパティが含まれており、すべてのブラウザで機能するとは限りません。他の解決策は問題ありませんが、この小さな三角形に境界線を追加することはできません. あなたはあなたに合ったものを選びます。

編集：

さらに別のフィドル: http://jsfiddle.net/dAdry/22/。なしでこれを行う方法
も考え出しました。2 つの三角形を配置します。1 つは灰色で、もう 1 つは白です。transform

#log2 {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 300px;
    padding: 10px;
    margin: 15px auto 0;
    position: relative;
    background: #fff;
}
#log2::before, #log2::after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    right: 19px;
}
#log2::before {
    border-color: #ccc transparent;
    top: -10px;
    right: 19px;
}
#log2::after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #fff transparent;
    border-width: 0 10px 10px 10px;
    top: -9px;
}

それを試してみて、それがあなたに合っているかどうか教えてください.

于 2013-10-08T18:43:06.150 に答える
1

:before を使用して三角形を作成します

http://jsfiddle.net/dAdry/9/

#log2:before {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 8px 7.5px;
    border-color: transparent transparent white transparent;
    position: absolute;
    display:block;
    top: -8px;
}
于 2013-10-08T18:40:37.573 に答える
1 
.arrow-up {
        width: 0;
        height: 0;
        margin-top: 0px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid gray;
        }

fiddle

于 2013-10-08T18:40:53.877 に答える
0

http://jsfiddle.net/dAdry/27/

これにより、境界が作成されます。CSS

               .arrow-up {
    width: 0px;
    height: 0px;
    margin:0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid gray;
    }
.arrow-inner {
width:0;
height:0;
     margin:1px 0 0 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;   
}
     #log2 {
    height: 250px;
    width: 250px;
    background: white;
    border: 1px groove rgba(0, 0, 0, .35);
    position: relative;
    display: block ;
    margin-top: 54px;
    float: left;
    left: 29.965%;
    border-radius: 3.5px;
    }

そしてHTML...

                    <ul id="log2" style="display: inline;">
                  <span class="arrow-up" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;" ></span>
                    <span class="arrow-inner" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;"></span>
                    <br/>How are u?<br/>Whats the matter? :D
                </ul>
于 2013-10-08T18:40:56.467 に答える