背景主题

介绍

Obi-Wan Kenobi，Qui-Gon Jinn和Darth Maul将要战斗！但是，他们都忘了带各自的光剑。编写一个程序或函数，在给定字符串Jedi作为输入的情况下，生成类似于此^*的图像：

并给定字符串Sith，生成类似于此的图像：

图像规格

• 3个光剑（白色刀片的一端包括圆形边缘（红色表示两个圆形边缘），包括手柄）均为900px长（不包括刀片周围的颜色渐变）。

• 刀片末端的圆形边缘是一个半圆（显然是它的离散近似值），其直径等于刀片的宽度。

• 刀片（即光剑的白色部分）宽12像素。

• 绿色和蓝色光剑之间的距离为200像素（从绿色刀片的中心线到蓝色刀片的中心线）。

• 所有3个光剑的手柄均为180像素（占总长度的1/5）。因此，包括圆边的刀片本身对于蓝色和绿色光剑为720px长，对于红色光剑的两个刀片为360px长。

• 蓝色和绿色光剑的手柄在光剑的底部。红色光剑的手柄水平居中。

• 从白色刀片的边缘到完全白色的渐变长度为1.5 *刀片的宽度（例如，线性部分为18px）。

• 绿色渐变从RGB（0,255,0）变为白色（255,255,255）（或透明的，如果您更容易实现）。红色渐变从（255,0,0）变为白色，蓝色渐变从（0,0,255）变为白色。

• 手柄的颜色为RGB（128,128,128）。

• 光剑周围可能有白色的空白空间。

输入项

无论是Sith或Jedi作为一个字符串。您可以从STDIN中获取此字符串，作为函数参数，命令行参数或任何类似参数。您可能会假设输入将始终是完全相同Sith或Jedi没有其他内容。

输出量

您必须生成一个图像文件，其中包含与输入字符串相对应的图像。您可以相对自由地选择所需的任何图像格式，只要它是真彩色图像即可。

计分

这是代码高尔夫球，因此最短的答案以字节为单位。愿原力与你同在。

^*这篇文章中的图片未显示完整尺寸。

HTML / CSS解决方案，765740541字节

<style>[id]:not(:target){display:none}table{width:900px;height:12px;border-spacing:0}td:last-child{border-radius:0 12px 12px 0}#Sith td:first-child{border-radius:12px 0 0 12px}#Sith td{box-shadow:0 0 18px red}#Jedi{transform:rotate(-90deg);margin:350px 0}#Jedi td{box-shadow:0 0 18px #0f0}*+table{margin:200px 0 0 0}#Jedi *+table td{box-shadow:0 0 18px #00f}td:nth-last-child(2){background:#888;width:180px;box-shadow:none!important}</style><div id=Jedi><table><td><td></table><table><td><td></table></div><table id=Sith><td><td><td></table>

最近的重构使用:target伪类而不是A <form>和Javascript。

要输入任一输入，请将其添加到URL的末尾作为目标，例如test.html#Jedi或test.html#Sith

这里还是空白和一些注释：

<style>
  /* hide all but the anchored lightsaber (only lightsabers have ids) */
  [id]:not(:target) { display:none }

  /* tables are lightsabers */
  table { width:900px; height:12px; border-spacing:0 }
  td:last-child { border-radius:0 12px 12px 0 } /* curved tip */
  #Sith td:first-child { border-radius:12px 0 0 12px } /* 2nd curved tip */
  #Sith td { box-shadow:0 0 18px red }
  #Jedi { transform:rotate(-90deg); margin:350px 0 }
  #Jedi td { box-shadow:0 0 18px #0f0 } /* green */
  * + table { margin:200px 0 0 0 } /* gap between Jedi lightsabers */
  #Jedi * + table td { box-shadow:0 0 18px #00f } /* blue */
  /* handles */
  td:nth-last-child(2) {
    background:#888; width:180px; box-shadow:none!important }
</style>
<div id=Jedi>
  <table><td><td></table>
  <table><td><td></table>
</div>
<table id=Sith><td><td><td></table>

光剑是<table>通过其id属性未隐藏的每个零件（刀片/手柄）具有一个单元的元素。

刀片涂有CSS box-shadow，绝地剑经受了闪电transform: rotate()。

图片或没有发生（单击以获取完整分辨率）：

如果添加td{background:#fff}body{background:#000}到CSS，您将获得很酷的深色视图。

在Firefox和Chrome（在Linux上）中进行了测试。请注意，这一点都不符合标准，因为我试图尽可能缩小尺寸。

感谢@manatwork提供的border-spacing和:target。