brinch brinch - 2 months ago 11
HTML Question

Why won't this css work as expected in MVC project?

I want to draw a yin-yang symbol with css in my MVC project. So I found some css, which does what I want:

css:

#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}

#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}


html:

<div id="yin-yang"></div>


I can easily get it to work in jsfiddle:

https://jsfiddle.net/15ee603g/

Yin-Yang looking good

But as soon as I insert it in my MVC project, it draws all wrong

https://dotnetfiddle.net/A4ZyAy

Yin-Yang not good

What can be the reason for this?

Answer

Your using bootstrap css which is including box-sizing: border-box; which is causing the distortion. You an override this by adding

box-sizing: initial;

to each of your #yin-yang styles (including the :before and :after)