特殊 CSS 形状：语音气泡、心形、无穷大和其他复杂形状
本帖最后由 napel29903 于 2023-12-11 16:27 编辑The third part involves creating geometric shapes with the help of CSS alone. Also in this case, we recommend abstracting it through SCSS. Published on 01/09/2015 We've seen how to create simple and complex geometric shapes using CSS. In the third part we will see some specific shapes and later we plan to create a detailed article. Comic book CSS code.fumetto { width:150px; height:100px; background:orange; position:relative; border-radius:12px; -moz-transform:rotate(0); -webkit-transform:rotate(0); - ms-transform:rotate(0); -o-transform:rotate(0); transform:rotate(0); } .fumetto:before { content:""; width:0; height:0; position:absolute; right :100%; top:35px; border-top:15px solid transparent; border-right:30px solid orange; border-bottom:15px solid transparent; }
SCSS code @mixin fumetto($larghezza, $altezza, $raggio C-level executive list Bordo, $sfondo , $rotazione) { width:$larghezza; height:$altezza; background:$sfondo; position:relative; border-radius:$raggioBordo; -moz-transform:rotate($rotazione); -webkit-transform:rotate ($ rotazione); -ms-transform:rotate($rotazione); -o-transform:rotate($rotazione); transform:rotate($rotazione); &:before { content:""; width:0; height: 0; position:absolute; right:100%; top:round($altezza*0.35); border-top:round($altezza*0.15) solid transparent; border-right:round($altezza*0.3) solid $sfondo; border- bottom:round($altezza*0.15) solid transparent; } } .fumetto { @include fumetto(150px, 100px, 12px, orange, 0deg); } HTML Tuodan CSS code.uovo { width:120px; height:180px; background -color:orange; border-radius:60px 60px 60px 60px / 120px 120px 60px 60px; -moz-transform:rotate(0); -webkit-transform:rotate(0); -ms-transform:rotate(0); - o-transform:rotate(0); transform:rotate(0); } SCSS code @mixin uovo($larghezza, $sfondo, $rotazione) { width:$larghezza; height:round($larghezza*1.5); background - color:$sfondo; border-radius:#{round($larghezza*0.5)} #{round($larghezza*0.5)} #{round($larghezza*0.5)} #{round($larghezza*0.5)} / #{$larghezza} #{$larghezza} #{$larghezza*0.5} #{$larghezza*0.5}; -moz-transform:rotate($rotazione); -webkit-transform:rotate($rotazione);
https://zh-cn.btleads.com/wp-content/uploads/2023/12/C%E7%BA%A7%E6%89%A7%E8%A1%8C%E5%90%8D%E5%8D%95-300x178.png
-ms- transform:rotate($rotazione); -o-transform:rotate($rotazione); transform:rotate($rotazione); } .uovo { @include uovo(120px, orange, 0deg); } HTML block CSS code.cuore { position:relative; width:120px; height:96px; -moz-transform:rotate(0); -webkit-transform:rotate(0); -ms-transform:rotate(0); -o-transform:rotate( 0); transform:rotate(0); } .cuore:before { content:""; width:60px; height:96px; position:absolute; top:0; left:60px; background:orange; border-radius:60px 60px 0 0; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform: rotate(-45deg); -moz-transform-origin:0 100%; -webkit-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; } .cuore:after { content:""; width:60px; height:96px; position:absolute; left:0; top:0; background:orange; border-radius:60px 60px 0 0; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); - moz-transform-origin:
页:
[1]