• • 已关闭**。此问题需要超过focused。当前不接受答案。
• • 想要改进此问题吗？**更新此问题，使其仅关注editing this post的一个问题。

15小时前关门了。
Improve this question
enter image description here你能帮我创建什么是在照片使用css和html
下面是我的两个尝试，唯一不能实现的是虚线边界，特别是在底部，那里是三角形状的形状。
我尝试了两种方法，第一次我做的形状都在一起，而在第二次尝试中，我创建了2个形状，但在这两个我都不能创建虚线边界的东西

.price-tag-vertical {
    line-height: 100px;
    width: 80px;
    height: 120px;
    display: inline-block;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(30deg, transparent 40px, #ff7726 0%), linear-gradient(-30deg, transparent 40px, #ff7726 0%);
  border: 1px dashed green;
}

.blue {
  background-color: #3b82f6;
  margin-top: 10px;
  width: 70px;
  height: 70px;
}

.card-price {
  position: relative;
}

.card-price:after {
  content: '';
  position: absolute;
  border-width: 1px 1px 0px 1px;
  border-color: white;
  border-style: dashed;
  width: 60px;
  height: 100%;
  left: 5px;
  top: 5px;
}
.tag {
  position: absolute;
    display: block;
  bottom: -35px;
    border-right: 35px dashed #3b82f6;
    border-left: 35px dashed #3b82f6;
    border-top: 0px dashed #3b82f6;
  border-bottom: 35px solid transparent;
}

.level {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div>
  <div class="price-tag-vertical center"><span>$9.99</span></div>
</div>

 <div class="blue card-price" ><i class='tag'></i><div class="level">1</div> </div>