1

これはどのように見えるべきかです:( 出典：kerrydeaf.com）上を揃える

span.trig_italic2{color:#000000; line-height:17px;font-size:12px;font-family:opensansitalic;     
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;}
span.trig_italic2:before
{
content:"";
display:block;
position: absolute;
right: -22.5px;
top:0;
width: 0;
height: 0;
border: 11px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}

これがjsfiddleです：http： //jsfiddle.net/alma/zQKhb/2/

問題は、上記のように三角形を整列させるための角のある長方形のボックスを作成するのが難しいことです。

ハイブリッドコーディングを使用したiPhoneアプリ用です。

更新：@andyb。更新していただきありがとうございます。これは私が以下のように表示するものです。

上を揃える
（出典：kerrydeaf.com）

更新：@andyb。これで解決され、iOS6スティミュレーターのスクリーンショットが表示されます。 （出典：kerrydeaf.com）上を揃える

更新：質問：黄色のボックスを下に移動して、ギャップを残さずに水色のボックスにタッチするにはどうすればよいですか？

上を揃える
（出典：kerrydeaf.com）

更新：回答：解決されました：このmargin-bottomを追加しました：-span.trig_italic2 CSSに8.5pxで、機能しました。（画像は含まれていません）

4

2 に答える 2

4

黄色の三角形を作る代わりに、白い三角形を作って端を切り落としてみませんか？

<span>端が白い三角形で占められるため、これは少し広くすることに依存しています. display:inline-blockそのため、 が有効になるようにスパンを指定できますwidth。また、高さの値を小さくして、テキストをブロックの中央に垂直に揃えるために をにline-height等しくする必要がありました。font-size

編集:背景は単色ではないため、代替のアプローチは、線形グラデーションを使用して端を切り落とすことです。このアプローチの (わずかな) 欠点は、切断点の開始点が CSS でハードコーディングされており、可変幅のコンテンツに適応しないことです。

更新されたデモ(Webkit のみ)

Windows 7 上の Chrome 25 での結果

span.trig_italic2 {
    color:#000000;
    line-height:12px;
    font-size:12px;
    font-family:opensansitalic;     
    width:136px;
    display:inline-block;
    height: 12px;
    background: #FFCC05;
    position: relative;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
    margin-right:50px;
    padding:3px 4px 3px 4px;
    background:-webkit-linear-gradient(45deg, #FFCC05 100px, transparent 100px);
}

無地の背景で機能する元の回答は以下に残されています。

元のデモ(Webkit のみ)

span.trig_italic2 {
    color:#000000;
    line-height:12px;
    font-size:12px;
    font-family:opensansitalic;     
    width:136px;
    display:inline-block;
    height:12px;
    background: #FFCC05;
    position: relative;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
    margin-right:50px;
    padding:3px 4px 3px 4px;
}

span.trig_italic2:after {
    content:"";
    display:block;
    position: absolute;
    right:0;
    top:0;
    width:0;
    border:12px solid transparent;
    border-color:#fff #fff transparent transparent;
}

</p>

于 2012-11-26T11:24:18.560 に答える
1

box-sizing問題は、に設定しない限りボックスサイズを大きくするパディングにありますborder-box。

私はこれを行います：http：//jsfiddle.net/zQKhb/9/

于 2012-11-26T12:12:05.387 に答える