I have created CSS classes for generating circles with different colors. When I apply the CSS class in a regular HTML file, it displays correctly as expected. However, when I try to use it in an AngularJS partial page, the circle does not render properly.
Correct Example: https://i.sstatic.net/IodUY.png Incorrect Example: https://i.sstatic.net/1wnyG.png
Below is the CSS class for creating red circles:
.red-circle {
margin: 40px auto 0;
width: 30px;
height: 30px;
border-radius: 100%;
border: 1px solid #c92c09;
}
.red-circle:before, .red-circle:after {
content: '';
width: 15px;
height: 30px;
}
.red-circle:before {
float: left;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
background: #c92c09;
}
.red-circle:after {
float: right;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #c92c09;
}
Here is how the correct HTML page uses the CSS class:
<link rel="stylesheet" href="../css/circles.css" type="text/css" />
<body>
<div class="red-circle"><div>
</body>
And here is the incorrect HTML that results in improper display of the circle:
<div class="container" ng-controller="FieldCtrl">
<link rel="stylesheet" href="../css/circles.css" type="text/css" />
<div class="red-circle"> </div>
</div>