3

CSSの不規則なコーナーをクライアントに要求してもらいます。それも事ですか？これまで、CSSトライアングル（http://css-tricks.com/snippets/css/css-triangle/）を試しましたが、ブエノは試していません。

https://dl.dropbox.com/u/4031469/irreg.png

私はおそらく悲しいことに画像でそれをしなければならないだろうと思っています...みんながそれをやってのける方法を知らない限り。

主なパラメータ：少なくとも高さが柔軟である必要があり、できれば幅も柔軟である必要がありますが、必須ではありません。現在の解決策：コーナー効果をセカンダリボックスで機能させるのに十分なほどボックスの上に伸びるトップキャッパー...右下のディセンダーピースが完全に整列して下に押し出されます。

これまでの私の最も近い試み（上部に画像を使用）：https ：//dl.dropbox.com/u/4031469/fs.html

4

3 に答える 3

3

http://nicolasgallagher.com/pure-css-speech-bubbles/から盗む

クロムのjsfiddleからのスクリーンスニップ

http://jsfiddle.net/aBYHX/

編集:- 2 回目の試行。よりシンプルでCSSが少なく、例の写真と同じ側にあります。http://jsfiddle.net/aBYHX/1/ 

<div class="content">
    <p class="triangle-isosceles">This only needs one HTML element.</p>
    <p class="irregular-corner"> ---- </p>
</div>​

CSS: 

.content
{
    padding: 15px;
}
.triangle-isosceles, .irregular-corner 
{
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c;
}

.triangle-isosceles:after {
    content:"";
    position:absolute;
    bottom: 0; 
    right: 0; 
    border-width: 25px 50px 0 0; 
    border-style: solid;
    border-color: transparent white;
    /* reduce the damage in FF3.0 */
    display:block; 
}


.irregular-corner:before
{
    content:"";
    position:absolute;
    top: -25px; 
    right: 0px; 
    border-width: 25px 50px 0 0;
    border-style:solid;
    border-color:transparent #f3961c;
    /* reduce the damage in FF3.0 */
    display:block; 
}
​
于 2012-08-17T04:46:08.380 に答える
1

CSS3 では、私が調査した限りでは、この外観の詳細はまだ可能ではありません。

この外観には、ボックス シャドウを使用して達成した微妙なグラデーションと内側の輝きがありinsetます... 以前の CSS 三角形効果では機能しないようです。

CSS マスクは多くの状況で役立つように見えますが、必要な状況でbox-shadow: insetは画像が唯一の方法です。

今日、さまざまなブラウザーをサポートする -webkit-clip-path プロパティを使用して、これを機能させました。

.entry{
  background-color: blue;
  width: 500px;
  height: 200px;
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 40%, 100% 100%, 0 100%);
  -webkit-transform: translateY(-30px);
  top: 10px;
  left: 0;

}

body{
  background-color: green; 
}

http://codepen.io/randallb/pen/tmlAH

于 2012-08-21T19:36:46.237 に答える
0

Nora Brown が、 CSS3 の border-image プロパティに関する素敵な記事を書きました。じっくり読む価値あり…

クロスブラウザーのサポートが心配な場合 (そうあるべきです) は、優雅なフォールバックを提供してください。おそらく、「クレイジーコーナー」のない境界線を持つだけで、フォールバック状況として機能するかもしれませんが、そうではないかもしれません.

この方法はクロスブラウザーではありませんが、「プログレッシブ」であると便利だと考える人もいます。

于 2012-08-17T04:29:59.203 に答える