这个牌牌图象css怎么写

img

上图这个用像牌牌图象，用css怎么画出来呢
求指点 能写出css代码最好

回答不易，对你有帮助给个采纳吧


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #box1 {
      height: 94px;
      width: 64px;
      background-color: #dcf8ff;
    }
    #box2 {
      height: 80px;
      width: 44px;
      background-color: #f56147;
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      transform: rotateZ(15deg) translateX(10px) translateY(4px);
      border: 2px solid black;
      position: relative;
    }
    #cr {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fdd739;
      border: 2px solid black;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 5px;
    }
  </style>

  <body>
    <div id="box1">
      <div id="box2">
        <div id="cr"></div>
      </div>
    </div>
  </body>

  <script></script>
</html>

img

< img src="图片地址" width="45px" heigth="" >

大概率i就是图片

很容易就能写出来的.
用圆角边框,和定位即可解决你的问题.

这个用css写的话比较麻烦，图片比较方便