1

http://www.css3shapes.com/でこのコード スニペットを見つけましたが、その背後にあるロジックを理解できません。つまり、前後のセレクターの機能を知っています。私が混乱している{ height:0; width:40px; }のは、コードにある理由です。誰かがこのコードについて完全な説明をすることができれば、それは大歓迎です。

#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}
4

2 に答える 2

0

css に強制的に三角形を描画させるのはトリックです。#octagon:before { ... } を確認してください

border-bottom-width は要素の高さを決定します。側面の境界線が定義された幅に追加され、形状の幅が 100px になります。

高さ: 0 が遠くにある消失点のように機能することを想像できます。両側がそれに向かって移動しますが、幅 (100) が高さ 30 よりも大きいため、この場合は到達しません。

三角形と八角形の違いは、追加の幅です。

width: 40px;

彼の例で遊んでください: http://jsfiddle.net/mXTrG/ 灰色は横の境界線で、青は下の境界線です。

それは理にかなっていますか？ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-08-24T22:10:01.307 に答える