Popular Posts

How do I use CSS to show a triangle outline in the top right corner of a rectangle?

QUESTION : I currently have CSS to show a solid triangle on the top-right side of a rectangle. Is there a way I can modify the triangle to look like an outline? i.e. instead of:

rectangle with solid triangle on top-right I am looking to display something that looks more like this:


Here is a snippet demonstrating how I am displaying the solid triangle within a rectangle:

 

.rectangle {
    width: 70px;
    height: 45px;
    border: 1px solid black;
    position: relative;
}

.rectangle::after {
    border-width: 5px;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
    border-top-color: black;
    border-right-color: black;
}
 
 
 
ANSWER : 
.rectangle {
    width: 70px;
    height: 45px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
}

.rectangle::after {
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-bottom: 1px solid black;
} 

 

How do I use CSS to show a triangle outline in the top right corner of a rectangle? How do I use CSS to show a triangle outline in the top right corner of a rectangle? Reviewed by Snehal Vasava on April 04, 2023 Rating: 5

No comments:

Breaking

Powered by Blogger.