1

これは私のコードです

CSS

#page {
    width: 900px;
    padding: 0px;
    margin: 0 auto;
    direction: rtl;
    position: relative;
}
#box1 {
    position: relative;
    width: 500px;
    border: 1px solid black;
    box-shadow: -3px 8px 34px #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 300px;
    top: 250px;
    text-align: justify;
    -webkit-transition: all .75s;
    font-size: large;
    color: Black;
    padding: 10px;
    background: #D0D0D0;
    opacity: 0;
}
@-webkit-keyframes myFirst {
    0% {
        right: 300px;
        top: 160px;
        background: #D0D0D0;
        opacity: 0;
    }
    100% {
        background: #909090;
        :;
        right: 300px;
        top: 200px;
        opacity: 1;
    }
}
#littlebox1 {
    top: 200px;
    position: absolute;
    display: inline-block;
}
.littlebox1-sentence {
    font-size: large;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 10px;
    background: #D0D0D0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: background .25s ease-in-out;
}
#bothcontainer:hover ~ #box1 {
    -webkit-transition: all 0s;
    background: #909090;
    :;
    right: 300px;
    top: 200px;
    -webkit-animation: myFirst .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
}
#bothcontainer:hover .littlebox1-sentence {
    background: #909090
}
#bothcontainer:hover .triangle {
    border-right: 25px solid #909090
}
.triangle {
    position: relative;
    width: 0;
    height: 0;
    border-right: 25px solid #D0D0D0;
    border-top: 27px solid transparent;
    border-bottom: 24px solid transparent;
    right: 184px;
    -webkit-transition: border-right .25s ease-in-out;
}

HTML

<body dir="rtl">
  <div id="page">
    <div id="bothcontainer">
        <div id="littlebox1" class="littlebox1-sentence">put your mouse here</div>
        <div id="littlebox1" class="triangle"></div>
    </div>
  <div id="box1"></div>
</div>

三角形に境界線を追加したい.littlebox1-sentence.

境界線の色は変わりません。

ここにフィドルがあります

私は解決策を見つけることに近づいていますが、それはまだ私が望む場所ではありません.

フィドル

4

3 に答える 3

2

あなたがどのような効果を求めているのか正確にはわかりませんが、-webkit-filter を見てみたいと思います。「形状に関係なく、この要素とその子」に影を追加できます。

#littlebox1 {
       top: 200px;
       position: absolute;
       display: inline-block;
       -webkit-filter: drop-shadow(green -10px 0 10px);
}

http://jsfiddle.net/DyxA4/

于 2012-12-04T18:50:12.420 に答える
1

別の解決策: ボーダーベースの三角形をスキップし、代わりに 3 つの div を使用します。

<div class="sign">
    <div class="arrow"><div></div></div>
    <p>Lorem ipsum dolor</p>
</div>

基本的に、「.arrow div」を使用して三角形を作成し、「.arrow」を使用して不要なビットを切り取ります。

http://jsfiddle.net/k5J6M/1/

于 2012-12-04T21:02:44.043 に答える
1

三角形は境界です。あなたが求めていることをすることはできません。イメージを作るだけ。

于 2012-12-04T17:44:05.340 に答える