458 0
Математическая формула на чистом CSS end DIV
Возможно ли создать математическую формулу с дробьями и скобками на чистом CSS end DIV без ипользования спрайтов и рисунков?
Перед Вами пример того как можно без проблем создать такую формулу.
Времья создания 1 час + 1 час на подбор шрифта и математических символов.
Виконуваний код:
<![CDATA[<div class="korobka">
<div class="blocformi">
<div class="perv-chast">
<div>
Φ<sub><i>u</i></sub>
</div>
<div>
<div class="kryglie-skobku">
<div class="kryglie-skobku-fon">
<s><i>X − ξ</i> </s>
<s><i>δ</i></s>
</div>
</div>
</div>
<div class="perv-chast-drob">
<u>≡</u>
<s>1</s>
<s>2</s>
</div>
</div>
<div>
<div class="ramka-kvadrat">
<div class="ramka-kvadrat-fon">
<div>
1+<i>erƒ</i>
</div>
<div>
<div class="kryglie-skobku">
<div class="kryglie-skobku-fon">
<s><i>X − ξ</i> </s>
<s><i>δ</i> <u>√</u>2</s>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.korobka {width:100%; height:100%; height: 100vh; overflow:hidden; display:flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.blocformi {width:220px; min-height:48px; display:flex; flex-flow: row wrap;}
.blocformi > div {width:50%;}
.perv-chast {width:100%;height:48px; display:flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.perv-chast > div {width:50%;}
.perv-chast > div:first-child {width:20%;}
.perv-chast > div:last-child {width:30%;}
.ramka-kvadrat {position:relative;width:100%; height:48px; border:1px solid #000;}
.ramka-kvadrat-fon {width:90%; height:48px; background:#fff; position:absolute; top:-1px; left:5%; display:flex; flex-flow: row wrap; justify-content: center; align-content: space-between; align-items: center;}
.ramka-kvadrat-fon > div:first-child {width:37%;margin-right:3%;}
.ramka-kvadrat-fon > div:last-child {width:55%;}
.kryglie-skobku {position:relative; width:100%; height:48px; border:1px solid #000; border-radius:10px;}
.kryglie-skobku-fon {width:90%; height:48px; padding:0 4px; background:#fff; position:absolute; top:-1px; left:5%;}
.kryglie-skobku-fon s, .perv-chast-drob s {display:block; width:100%; height:24px;display:flex; justify-content: center; align-content: center; align-items: center;}
.kryglie-skobku-fon s:first-child, .perv-chast-drob s:nth-child(2) {border-bottom: 1px solid #000;}
.kryglie-skobku-fon u {position:relative;}
.kryglie-skobku-fon u::before{content:'';display:block;width:10px;height:1px; border-bottom:1px solid #000; position: absolute;right:-10px; top:-2px; }
.perv-chast-drob {position:relative; padding:0 3px;}
.perv-chast-drob s {width:40%;margin-left:54%;}
.perv-chast-drob u {position:absolute; top:16px; left:5px;}
</style]]>