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?
Reviewed by Snehal Vasava
on
April 04, 2023
Rating:
Reviewed by Snehal Vasava
on
April 04, 2023
Rating:


No comments: