Making arrow at one corner or side of the Tab

[codeispoetry]

You can see that the above image has arrows for the three tabs. How can we do this through CSS?

Is there a particular Keyword through which I can search it “On the search engines”. I tried to search something on code Pen but got failed miserably.

[codeispoetry]

I think I have found the solution for this now →

[PaulOB]

@codeispoetry

I think I have found the solution for this now →

Yes I would have suggested something similar and absolutely positioning a css border-triangle using :before and :after.

You could rotate a box 45deg to get the arrow but its about the same amount of code.

[codeispoetry]

In this code pen →

The last tab’s CSS is governed by which part of the code? what if I also want the arrow in the end not rectangular section with rounded border.

[ronpat]

@codeispoetry

The last tab’s CSS is governed by which part of the code?

selectors that include or end with :last-child plus any other common (shared) styles.

Do you have a text editor that would allow you to experiment on your computer and browser?

Paul’s design includes the right pointing arrow on the left end of the next breadcrumb segment. Therefore, the last segment will be flat to the right end by default. you will have to construct an arrow to add to the right end of the last breadcrumb segment.

(You really should take a basic HTML and CSS course.)
I guess I’ve said that before…

[codeispoetry]

@ronpat

Do you have a text editor that would allow you to experiment on your computer and browser?

[ronpat]

Now that I’ve played smarty pants, I was wrong about the construction.

Ah, here’s Paul.

[PaulOB]

Hi,

It is a little trickier than expected but play around with something like this.

SCSS:

.breadcrumb {
	display: flex;
	border-radius: 6px 0 0 6px;
	margin: auto;
	text-align: center;
	top: 50%;
 	width:calc(100% - 38px);
	// max-width: 1200px;
	height: $base * 1.5;
	transform: translateY(-50%);
	box-shadow: 0 1px 1px rgba(0,0,0,1),
							0 4px 14px rgba(0,0,0,0.7);
	z-index: 1;
	background-color: #ddd;
	font-size: 14px;
}

.breadcrumb a:last-child:after {
	right: $base / 1.35 * -1;
}

The overflow:hidden was removed from the breadcrumb and border radius removed from the right side. Next the width was reduced by the amount of the arrow. The arrow is then positioned at the end.

If overflow:hidden is required for some other use that I didn’t notice then it may be difficult to accomplish in the same manner.

It probably needs tidying up but that’s the basics. (You can get the compiled css from codepen instead of scsss.)

[ronpat]

Hmmm, in the compiled CSS, I removed the overflow:hidden; then added a new ruleblock to remove the right end rounded corners

.breadcrumb:last-child {  /* ADD this rule block */
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}

It doesn’t look quite perfect… possibly because I didn’t consider the calculated width. It IS a bit more complicated than I thought at first.