4

私は現在クライアントのウェブショップに取り組んでおり、彼らのデザイナーは紙の上に素晴らしい見た目のウェブサイトを作成しました. それをHTML/CSSなどに翻訳するのが私の仕事です。

ここに画像の説明を入力

ご覧のとおり、角が丸く、斜めの塗りつぶしと斜めのテキストも同様です。

赤い形は「カートに追加」と表示されており、顧客はそのクリック可能を望んでいますが、その形のみです。

上記の画像は、私が「一種の」複製に成功し、Chromeで動作するようになりました。しかし、Firefoxで試してみると、すべてめちゃくちゃです。

これは私が使用したCSSコードです：

.product-grid > div {
position:relative;
width: 215px;
height: 320px;
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 6px;
margin-top: 6px;
text-align: center;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow:3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
z-index:5;
overflow:hidden;
}

.product-grid .blue {
width: 0px;
height: 0px;
border-style: solid;
border-width: 75px 175px 0 0;
border-color: #009de0 transparent transparent transparent;
bottom:0px;
right:0px;

}


.product-grid .red {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 75px 175px;
border-color: transparent transparent #ff0000 transparent;
float:right;
bottom:0px;
right:0px;
cursor:pointer;
z-index:2;
}


.product-grid .blue .price {
display: block;
font-weight: 800;
font-size: 18px;
color: #FFF;
margin-bottom: 4px;
-webkit-backface-visibility: hidden;    
backface-visibility: hidden;
position:relative;
margin-top:-50px;
width:100px;
transform:rotate(337deg);
-ms-transform:rotate(337deg);
-moz-transform:rotate(337deg);
-webkit-transform:rotate(337deg);
-o-transform:rotate(337deg);

}
.product-grid .red .cart {
margin-bottom: 3px;
width:100px;
color:#FFF;
transform:rotate(337deg);
-ms-transform:rotate(337deg);
-moz-transform:rotate(337deg);
-webkit-transform:rotate(337deg);
-o-transform:rotate(337deg);
margin-top: 40px;
margin-right: 15px;
-webkit-backface-visibility: hidden;    
backface-visibility: hidden;
font-size:18px;
}

カートに追加ボタンはまだ長方形ですが、上半分は表示されていません。それは私のクライアントが望んでいることではありません。

ここに画像の説明を入力

何をするようにアドバイスしますか？SVG を使用しますか? または、どのクロス ブラウザー ソリューションが機能する必要がありますか?

多分誰かが私を正しい方向に向けることができますか？

4

3 に答える 3

1

いろいろ組み合わせてみました。それは純粋なCSSです:)。それは私がコメントに入れた技術を使用しています。http://jsfiddle.net/wCTCW/を参照

ここに画像の説明を入力

これにより、テキストが回転します

.rotate20 {

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');

-moz-transform:  matrix(0.93969262, -0.34202014, 0.34202014, 0.93969262, 0, 0);

-webkit-transform:  matrix(0.93969262, -0.34202014, 0.34202014, 0.93969262, 0, 0);

-o-transform:  matrix(0.93969262, -0.34202014, 0.34202014, 0.93969262, 0, 0);

}

これにより、三角形が作成されます

.box2 { width: 0; height: 0; border-top: 100px solid transparent; border-right: 240px solid red; }

次に、白を入れて右下のボックスを削除します。コーナーがなくなったら、border-radius を入れて、希望の丸みを作成します。

于 2013-08-15T07:37:27.063 に答える