我想在 div 的边框左侧制作一条小垂直线 [关闭]

Question

如果看不懂，请打开图片。我想在 div 的左边框上画一条黑色竖线

对于我没用的绘画能力，我深表歉意。 enter image description here 我必须怎么做才能在 css 中做到这一点？

谢谢。

Answer 1

您的 HTML 代码

<div class="badge">
    <p class="text">New</p>
</div>

背景CSS

.badge {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 65%, 0 100%);
    background-color : red;
    height: 100px;
    width:50px
}
.text {
    text-align: center;
    padding-top: 35px;
}

您可以将bennettfeely 用于不同的 css 形状，这将生成形状的剪辑路径

Answer 2

请查看此链接https://stackoverflow.com/a/24207393/10293708，有类似的问题。但总而言之，我还建议您先尝试使用 css 做一些事情，也许您可​​以将 jsfiddle 链接添加到您目前所取得的成就，以便其他人可以提供更好的帮助。