纯CSS3 实现的海盗维京锏

看起来像那个东半球最好的锤子

hammer,viking mace

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2351
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

p {
  font-family: helvetica;
  text-align: center;
  font-size: 12px;
  padding: 0;
  margin: 0;
  margin-top: -20px; }

.hammer {
  margin: 50px auto;
  height: 165px;
  width: 120px; }

.head {
  margin-left: 10px;
  height: 65px;
  width: 100px;
  background: #cfcfcf; }

.head::before {
  content: "";
  position: absolute;
  height: 45px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #e8e8e8;
  margin-left: -10px; }

.head::after {
  content: "";
  position: absolute;
  height: 45px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #a8a8a8;
  margin-left: 100px; }

.head .rune {
  background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Odal_rune.svg/350px-Odal_rune.svg.png');
  background-size: cover;
  opacity: 0.3;
  height: 50px;
  width: 50px;
  margin-left: 25px;
  margin-top: 5px;
  position: absolute; }

.head .rune::before {
  content: "";
  position: absolute;
  margin-top: -5px;
  margin-lefT: 25px;
  height: 65px;
  width: 50px;
  background: rgba(0, 0, 0, .3); }

.head .rune::after {
  content: "";
  position: absolute;
  margin-top: 60px;
  margin-lefT: 25px;
  height: 75px;
  width: 10px;
  background: rgba(0, 0, 0, .3); }

.handle {
  height: 75px;
  width: 18px;
  background: #b39370;
  margin-left: 52px; }

.hilt {
  width: 18px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 18px solid #cfcfcf;
  margin-left: 50px; }

.hilt::before {
  content: "";
  position: absolute;
  width: 18px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 5px solid #c9c9c9;
  margin-top: 18px;
  margin-left: -2px; }

.hilt::after {
  content: "";
  position: absolute;
  width: 10px;
  border-right: 2px solid transparent;
  border-bottom: 18px solid rgba(0, 0, 0, .1);
  margin-left: 8px; }

HTML

看起来像那个东半球最好的锤子

hammer,viking mace

编辑器支持Emmet

快捷键

看起来像那个东半球最好的锤子

hammer,viking mace

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：