运用SVG描绘四面国旗~

index.html

<svg 
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg"
  id="bahamas">
  <rect x ="0" y="100" width="600" height="100" fill="#FFC72C" />
  <polygon points="0 0, 260 150, 0 300" fill="black"/>
  
</svg> -->

<svg 
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg"
  id="jamaica">
  <g stroke="#fed100" fill="#009b3a" stroke-width="50">
    <polygon points="-300 -150, 300 150, 900 -150" /> 
<!-- 这里不能直接以0 0为起点 600 0为终点画三角形 方块顶部会被三角形第三条边覆盖成为黄色 -->   
    <polygon points="-300 450, 300 150, 900 450" />    
  </g>
</svg>

 <svg 
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg"
  id="macedonia">
  <g fill="#ffe600">
    <polygon  points= "0 0, 600 300, 510 300, 90 0" />
    <polygon points="330 0, 270 300, 330 300, 270 0" />
    <polygon points="600 0, 0 300, 90 300, 510 0" />
    <polygon points="0 120, 600 180, 600 120, 0 180" />
    <circle cx = "300" cy="150" r="50" stroke="#d20000"  stroke-width="10" />
  
  
  </g>
  
</svg>

<svg 
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg"
  id="south-korea">
  
  <g stroke="black" stroke-width="15"
     transform="translate(300,200)">
    <path d="M-200 -50v100m25 0v-100m25 0v100 
             M140-50v45m0 10v45m25 0v-45m0 -10v-45m25 0v45m0
             10v 45"
          transform="rotate(30)"/>
    
     <path d="M-200 -50v100m25 0v-45m0-10v-45m25 0v100 
             M140-50v45m0 10v45m25 0v-100m25 0v45m0 10v45"
          transform="rotate(-30)"/> 
  </g>
  <circle cx="300" cy="200" fill="#cd2e3a" r="90" />
  <path fill="#0047a0" d="M300 200a45 45 0 0 1 78 45A90 90 0 1
                         1 300 110" />
  <path fill="#cd2e3a" d="M300 200a45 45 0 0 1 -78 -45A90 90 0 
                          0 1 300 110" />
  
</svg>

mdjdzjg.markdown

mdJdzjg

A Pen by liuxiaomingskm on CodePen.

License.

style.css

#bahamas {
  width: 600px;
  height: 300px;
  background-color: #00778B;
}

#jamaica{
  width:600px;
  height: 300px;
  background-color:black;
}

#macedonia {
  width:600px;
  height: 300px;
  background-color:#d20000;
}

#south-korea{
  width:600px;
  height: 400px;
}