Yin-Yang circle created with a DIV tag and CSS properties (without image file).
Code:
<style type="text/css">
#yinyang {
width: 100px; height: 50px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yinyang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #fff;
border: 18px solid #000;
border-radius: 100%;
width: 14px;
height: 14px;
}
#yinyang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000;
border: 18px solid #fff;
border-radius:100%;
width: 14px;
height: 14px;
}
</style>
<div id="yinyang"></div>
Demo:
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient#id {
background:url("path_to_image.png");
background-size:contain;
background-repeat:no-repeat;
}What operator is used to determine the rest of the division of two numbers?
% * /var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()$nr = ceil(3.5);
echo $nr; // 4