如何在CSS中创建奖牌

Question

我想在css中创建一枚奖牌,但不幸的是我被困在创建它如何在css/html中创建一枚奖章纯粹我试图通过互联网搜索但是没有找到任何关于此的完美结果请帮助我创建一枚奖牌

Answer 1

你可以使用:pseudo元素

• 使用歪斜的丝带
• 内圈的盒子阴影

.medal {
  width: 100px;
  height: 120px;
}
.ribbon {
  width: 80px;
  height: 70px;
  margin: 0 auto;
  position: relative;
}
.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  width: 35px;
  height: 100%;
  top: 0;
}
.ribbon:before {
  right: 0;
  background: #30110E;
  transform: skew(-28deg);
}
.ribbon:after {
  background: #EF7E76;
  transform: skew(28deg);
}
.coin {
  border: 1px solid #CA5D3E;
  border-radius: 50%;
  background: #F0CD73;
  width: 70px;
  height: 70px;
  position: relative;
  margin: -15px auto 0 auto;
  box-shadow: 0px 0px 3px 0px #989898;
}
.coin:after {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 35px;
  height: 35px;
  border-radius: inherit;
  box-shadow: 0 0 0 9px #D9B867;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="medal">
  <div class="ribbon"></div>
  <div class="coin"></div>
</div>