javascripthtmlcsstagsvisual-web-developer

I want to make a small vertical line at left of the border of a div

If you are unable to understand, then please open the image. I want to draw a black vertical line at left border of a div

I apologise for my useless paint ability. enter image description here What must I do to make this in css?.

Thanks.

Solution

  • Your HTML Code

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

    CSS for background

    .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;
}

    You can use bennettfeely for diffrent css shapes that will generate a clip-path of the shape