CSS纯样式绘制教程-优快云博客

本文链接：https://blog.youkuaiyun.com/swort_rush_b/article/details/105117159

一个简单的圆环：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
  #one{
    width: 400px;
    height: 400px;
    background-color: #93baff;
    border-radius: 200px;
 }
  #two{
  width: 200px;
  height: 200px; 
  position: relative;
  left:100px;
  top: 100px;
  background-color: white;
  border-radius:100px;
 }
    </style>
</head>
<body>
 <div id="one">
  <div id="two"></div> 
 </div>
</body>
</html>

效果：

四色板：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
        <style type="text/css">
       #one{
        width: 0;
        border-top:100px solid #FF898E; 
        border-bottom: 100px solid #C89386;
        border-left: 100px solid #FFB151;
        border-right: 100px solid #93BAFF;
       }
    </style>
</head>
<body>
 <div id="one"></div>
</body>
</html>

效果：
四色板

八色板：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
     <style type="text/css">
        #all{
          position: center;
        }
       #one{
        width: 0;
        border-top:20px solid #92D050; 
        border-bottom: 20px solid #FFFF00;
        border-left: 20px solid #92D050;
        border-right: 20px solid #FFFF00;
       }
       #two{
        width: 0px;
        border-top:20px solid #FF0000; 
        border-left: 20px solid #0070C0;
        border-right: 20px solid #FF0000;
        border-bottom: 20px solid #0070C0;
        position: relative;
        left: 40px;
        top: -80px;
       }
       #three{
        width: 0px;
        border-top:20px solid black; 
        border-left: 20px solid #7030A0;
        border-right: 20px solid black;
        border-bottom: 20px solid #7030A0;
       }
       #four{
        width: 0px;
        border-top:20px solid white; 
        border-left: 20px solid white;
        border-right: 20px solid #00B0F0;
        border-bottom: 20px solid #00B0F0;
        position: relative;
        left: 40px;
        top: -80px;
       }
    </style>
</head>
<body>
     <div id="all">
   <div id="one"></div>
      <div id="three"></div>
      <div id="two"></div>
      <div id="four"></div>
     </div> 
</body>
</html>

效果：
八色板

八色板Ⅱ：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <style type="text/css">
       #one{
        width: 0;
        border-top:20px solid #FF0000; 
        border-bottom: 20px solid #70AD47;
        border-left: 20px solid #70AD47;
        border-right: 20px solid #FF0000;
       }
       #two{
        width: 0px;
        border-top:20px solid #44546A; 
        border-left: 20px solid #44546A;
        border-right: 20px solid #FFFF00;
        border-bottom: 20px solid #FFFF00;
        position: relative;
        left: 40px;
        top: -80px;
       }
       #three{
        width: 0px;
        border-top:20px solid #7030A0; 
        border-left: 20px solid #7030A0;
        border-right: 20px solid #002060;
        border-bottom: 20px solid #002060;
       }
       #four{
        width: 0px;
        border-top:20px solid #FFC000; 
        border-left: 20px solid #00B0F0;
        border-right: 20px solid #FFC000;
        border-bottom: 20px solid #00B0F0;
        position: relative;
        left: 40px;
        top: -80px;
       }
    </style>
</head>
<body>
     <div id="one"></div>
     <div id="three"></div>
     <div id="two"></div>
     <div id="four"></div>
</body>
</html>

效果：
八色板Ⅱ

爱心：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
      div{
        position: absolute;
        left: 200px;
        top: 200px;
      }
       #one{
      background-color: red;
      height: 100px;
      width: 100px;
      transform: rotate(45deg);
     }
     #one:before{
        height: 100px;
        width: 100px;
        display: block;
        position: absolute;
        left:-45px;
        top:-0px;
        border-radius: 50px;
        background-color: red;
        content: " ";
      }
      #one:after{
        height: 100px;
        width: 100px;
        display: block;
        position: absolute;
        left:0px;
        top:-45px;
        border-radius: 50px;
        background-color: red;
        content: " ";
      }
    </style>
</head>
<body>
    <div id="one"></div>
</body>
</html>

效果：

绘制的各种图形