長方形のダイヤモンドHTML＆CSS3

Question

長方形にダイヤモンドを作りたいと思います。私はすでに、正方形でそれをやってきました：

.box { 
 
    width:100px; 
 
    height:100px; 
 
    background:orange; 
 
    z-index:1; 
 
    position:relative; 
 
} 
 

 
.box:before { 
 
    position:absolute; 
 
    content:''; 
 
    width:70.71%; 
 
    height:70.71%; 
 
    transform: rotate(45deg); 
 
    background: red; 
 
    top: 15%; 
 
    left: 15%; 
 
}

<div class="box"></div>

しかし、私はこのようにそれを作りたい：それは同じことはないので、

長方形が応答しますサイズ。何か案が ？

ありがとうございました

Answer 1

長方形を変更してダイヤモンドを作成しようとしています。あなたが紙の長方形でそれを試みたなら、それはそれについて行く最も簡単な方法ではないことを理解するでしょう。

あなたはclip-path使用することができます

.diamond { 
 
    background-color: #eee; 
 
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
 
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding: 2rem; 
 
}

<div class="diamond">I'm a diamond</div>

を...と、すべてのあなたがするためにそれが残っていますが、それは幅、高さ（またはそれらのいずれかのためにmin-*/max-*）だ設定することですそれに応答してその割合を制御する。

注記CSS clip-pathは現在、IEとEdgeによるサポートがほとんどない活発に使用されているブラウザの約88％にすぎません。

これらのサポートが必要な場合は、2つのレベルのラッパーを使用して、::beforeと::afterというラッパーの擬似体を作成します。

Answer 2

この手法では、CSS borderを使用して生成された2つの三角形が使用されます。

borderの幅には%を使用できないと思われますので、代わりにビューポート単位を使用しました。

.box { 
 
    width: 50vw; 
 
    height: 25vw; 
 
    background: orange; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
.box:before, 
 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
.box:before { 
 
    border-right: solid 25vw red; 
 
    border-top: solid 12.5vw transparent; 
 
    border-bottom: solid 12.5vw transparent; 
 
} 
 

 
.box:after { 
 
    right: 0; 
 
    border-left: solid 25vw red; 
 
    border-top: solid 12.5vw transparent; 
 
    border-bottom: solid 12.5vw transparent; 
 
}

<div class="box"></div>