1

私はこの形をしています：

ここに画像の説明を入力

CSS3で作成できるかどうか疑問に思っていました。

これは私がこれまでに持っているものです（フィドルをクリックしてください）：

HTML:

<div id="cafeDialog" role="dialog" class="cafeDialog caspSearch" style="">
    <div data-title="Search" role="main">
        <div>

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}
.caspSearch {
    border: 1px solid black;
    background: black;
   background: -moz-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(128, 144, 152, 0.9)), color-stop(8%, rgba(67, 74, 80, 0.91)), color-stop(91%, rgba(54, 58, 61, 0.96)), color-stop(100%, rgba(74, 81, 85, 0.9)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
    /* W3C */
    width: 500px;
    height: 300px;
    border-radius: 10px;
    padding: 0 !important;
    position:relative;
    top: 30px;

}
.caspSearch:before {
    content:'';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-bottom: 50px solid white;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

透明なグラデーションを使用する必要があり、黒い境界線でラップする必要があるため、三角形に苦労しています。

4

2 に答える 2

1

これはあなたが探しているものですか？

CSS

.triangle-isosceles {
    height: 200px;
    width: 300px;
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

.triangle-isosceles.top {
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
    background:-moz-linear-gradient(#f3961c, #f9d835);
    background:-o-linear-gradient(#f3961c, #f9d835);
    background:linear-gradient(#f3961c, #f9d835);
}

.triangle-isosceles:after {
    content:"";
    position:absolute;
    bottom:-15px; 
    left:50px;
    border-width:15px 15px 0;
    border-style:solid;
    border-color:#f3961c transparent;
    display:block; 
    width:0;
}

.triangle-isosceles.top:after {
    top:-15px;
    right:50px; 
    bottom:auto;
    left:auto;
    border-width:0 15px 15px;
    border-color:#f3961c transparent;
}

HTML

<p class="triangle-isosceles top">Your content.</p>

フィドル

http://jsfiddle.net/sjccN/4/

于 2013-01-30T11:33:50.250 に答える
0

私はあなたのためにサンプルを作りました...あなたの影などをこれとあなたのセットに追加してください:)

http://jsfiddle.net/BNgTh/

#talkbubble {
   width: 120px;
   height: 80px;
    margin-top:20px;
    margin-left:40px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   top: -20px;
    left:40%;
   width: 0;
   height: 0;
   border-bottom: 26px solid red;
   border-right: 13px solid transparent;
   border-left: 13px solid transparent;
}

#talkbubble:before の上部の値を変更して、必要に応じて小さくします。

于 2013-01-30T11:21:30.257 に答える