css布局实现一个宝剑效果代码-html代码-BFW代码库

css布局实现一个宝剑效果代码

代码语言：html

代码描述：css布局实现一个宝剑效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #6f5875;
  background-image: radial-gradient(circle, #6f5875 0%, black 100%);
}
body:before {
  content: "";
  width: 25rem;
  height: 25rem;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3cae1;
}

.sword {
  position: relative;
  display: flex;
  flex-flow: wrap column;
  align-items: center;
  justify-content: center;
  transform: rotate(-15deg);
  filter: drop-shadow(1.25rem 0.625rem 0.3125rem rgba(0, 0, 0, 0.5));
}
.sword .fuller {
  width: 2.5rem;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  background-color: rgba(0, 0, 0, 0.05);
}
.sword .point,
.sword .blade {
  width: 5rem;
  position: relative;
  background-color: #5ac3bd;
}
.sword .point:before,
.sword .blade:before {
  content: "";
  opacity: 0.1;
  width: 2.5rem;
  height: 100%;
  position: absolute;
  background-color: black;
}
.sword .point:after,
.sword .blade:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  mix-blend-mode: overlay;
}
.sword .point {
  height: 5rem;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sword .point .fuller {
  height: 75%;
  bottom: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sword .blade {
  width: 5rem;
  height: 15rem;
}
.sword .blade .fuller {
  height: 100%;
  top: 0;
}
.sword .blade .fuller:before {
  content: "";
  opacity: 0.1;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  clip-path: polygon(43% 88%, 0 100%, 100% 100%, 100% 0, 78% 57%, 65% 76%);
  background-color: black;
}
.sword .quillons {
  width: 10rem;
  height: 2.5rem;
  position: relative;
  background-color: #542639;
  box-shadow: inset 0 0.75rem 0 0 rgba(0, 0, 0, 0.3);
}
.sword .quillons:before, .sword .quillons:after {
  content: "";
  width:.........完整代码请登录后点击上方下载按钮下载查看