WPF styling tab items as arrow-like

Solution 1:

This will do the job for you:

<Style TargetType="{x:Type TabItem}">
        <Setter Property="Background" Value="#f5f5f5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Path x:Name="Back" Data="M0,0 L 80,0 L100,20 L80,40 L0,40 L 20,20 " Stretch="None" VerticalAlignment="Stretch"
                              Stroke="#e8e8e8" StrokeThickness="2"
                              Fill="{TemplateBinding Background}"
                              HorizontalAlignment="Stretch" Margin="-30,0,0,0"/>
                        <ContentPresenter ContentSource="Header" VerticalAlignment="Center" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Back" Property="Fill" Value="#ffffff" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Instead of the border and polygon I used a Path to draw the shape for you.

You can use - (minus) values in margins to overlap items.

Result: