arrow-title.php

<?php
/**
 * Shortcode usage :
 * [ArrowTitle]Mon titre[/ArrowTitle]
 * [ArrowTitle stroke_color="#00FF00" fill="#000000" border_width="10" drop_shadow=1 shadow_color="#FF0000"]Mon titre[/ArrowTitle]
 */
function do_shortcode_arrow_titre ($atts, $content=null) {
    $atts = shortcode_atts( 
        array(
            'orientation' => 'right',
            'stroke_color' => '#000000',
            'border_width' => 2,
            'fill' => '#FFFFFF',
            'drop_shadow' => true,
            'shadow_color' => "#FFFF00",
        ), $atts, 'ArrowTitle' );
    $orientation = $atts['orientation'];
    $classBasename = "arrow-title";
    $className = "$classBasename--$orientation";
    $stroke_color = $atts['stroke_color'];
    $fill = $atts['fill'];
    $border_width = $atts['border_width'];
    $drop_shadow = $atts['drop_shadow']? "filter: drop-shadow(-20px 15px 0 {$atts['shadow_color']});" : null;
    ob_start();
    ?>
	<style>
	.<?php echo $className ?> path {
		fill: <?php echo $fill ?>;
		stroke: <?php echo $stroke_color ?>;
		stroke-width: <?php echo $border_width ?>px;
	}
	.<?php echo $className ?> > div {
		background-color: <?php echo $fill ?>;
    }
	.<?php echo $className ?> > div > *:not(svg) {
		color: <?php echo $stroke_color ?>;
		background-color: <?php echo $fill ?>;
		margin: 0;
		padding: 1rem;
    }
	.<?php echo $className ?> > div > *:before, 
	.<?php echo $className ?> > div > *:after {
		display:none;
    }
	</style>
    <div class="<?php echo $className ?>" style="position: relative; display:flex; align-items: stretch; <?php echo $drop_shadow ?>">
        <svg width="40" height="100" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
            <g id="<?php echo $className ?>-front">
                <path d="M 40 0 L 0 0 L 35 50 L 0 100 L 40 100" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="8"/>
            </g>
        </svg>
        <div style="position:relative; display: flex; align-items: center; ">
            <svg style="top: 0; width: 100%; height:<?php echo $border_width ?>px ;overflow: visible; position:absolute;" xmlns="http://www.w3.org/2000/svg">
                <line style="stroke:<?php echo $stroke_color ?>; stroke-width:<?php echo $border_width ?>" x1="0" y1="0" x2="100%" y2="0" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="8"/>
            </svg>
            <h2> <?php echo $content ?></h2>
            <svg style="bottom: -<?php echo $border_width ?>px; width: 100%; height:<?php echo $border_width ?>px;overflow: visible; position:absolute;" xmlns="http://www.w3.org/2000/svg">
                <line style="stroke:<?php echo $stroke_color ?>; stroke-width:<?php echo $border_width ?>" x1="0" y1="0" x2="100%" y2="0" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="8"/>
            </svg>
        </div>
        <svg width="40" height="100" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
            <g id="<?php echo $className ?>-front">
            	<path d="M 0 0 L 5 0 L 35 50 L 5 100 L 0 100" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="8"/>    
            </g>
        </svg>
    </div>
    <?php

    $output = ob_get_clean();
    return $output;

}
add_shortcode( 'ArrowTitle', 'do_shortcode_arrow_titre' );

[ArrowTitle stroke_color="#00FF00" fill="#000000" border_width="10" drop_shadow=1 shadow_color="#FF0000"]Mon titre[/ArrowTitle]