- 已关闭**。此问题需要超过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>
1条答案
按热度按时间fnx2tebb1#
您可以使用边框:2 px虚线#fff;为了实现虚线边界