Home > Article > Web Front-end > Take a look at the Tai Chi diagram drawn with border-radius_html/css_WEB-ITnose
Take a look at the Tai Chi diagram drawn with border-radius_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:031185browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><style type="text/css">body { background: #9999cc;}.as1 { width: 400px; height: 400px; /* 太极图大小 */ box-shadow: 0px 0px 10px 1px #ffff00;}.as1 , .ar2 , .at1{ background: #ffffff;}.as2 , .ar1 , .at2 { background: #000000;}.as1 , .as1 div { position: relative; border-radius: 8000px;}.as2.as2 { width: 50%; height: 100%; border-radius: 8000px 0px 0px 8000px;}.ar1 , .ar2 { left: 50%; width: 100%; height: 50%;}.at1 , .at2 { left: 35%; top: 35%; width: 30%; height: 30%;}</style></head><body>用border-radius绘制太极图<br /><br /><div class="as1"><div class="as2"> <div class="ar1"><div class="at1"></div></div> <div class="ar2"><div class="at2"></div></div></div></div></body></html> Reply to discussion (solution)
Pretty good, learned a lot
Really good! ! !
Very good!
http://css-tricks.com/examples/ShapesOfCSS/ http://css-tricks.com/examples/ShapesOfCSS/
Passing by I passed by and learned it
good good
It’s so powerful, I learned it
It seems good
Owner, this would be beautiful if it could rotate. ! ! ! !
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：input value and calculation, _html/css_WEB-ITnoseNext article：input value and calculation, _html/css_WEB-ITnose