» » » Математическая формула на чистом CSS end DIV
16 0  

Математическая формула на чистом CSS end DIV

am Возможно ли создать математическую формулу с дробьями и скобками на чистом CSS end DIV без ипользования спрайтов и рисунков?

Перед Вами пример того как можно без проблем создать такую формулу.

Времья создания 1 час + 1 час на подбор шрифта и математических символов.

Φu
X − ξ δ
1 2
1+erƒ
X − ξ δ 2

Исполняемый код:

<div class="korobka"> <div class="blocformi"> <div class="perv-chast"> <div> &#934;<sub><i>u</i></sub> </div> <div> <div class="kryglie-skobku"> <div class="kryglie-skobku-fon"> <s><i>X &minus; &#958;</i> </s> <s><i>&#948;</i></s> </div> </div> </div> <div class="perv-chast-drob"> <u>&equiv;</u> <s>1</s> <s>2</s> </div> </div> <div> <div class="ramka-kvadrat"> <div class="ramka-kvadrat-fon"> <div> 1+<i>er&fnof;</i> </div> <div> <div class="kryglie-skobku"> <div class="kryglie-skobku-fon"> <s><i>X &minus; &#958;</i> </s> <s><i>&#948;</i> <u>&radic;</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

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019