About tctech

Explain to you how all this mistaken denouncing pleasure and praising pain was born and we will give you a complete simply free text account of the system, and expound the actual teachings.

Data Analysis
Product Development
Digital Marketing
Security System

Scene System

CTA Bubbles

Sprechblasen-CTAs — zwei Formen, alle Farben, gespiegelt, mit und ohne Schatten.

Bubble One Bubble One Flip Bubble Two Bubble Two Flip Alle Farben Mit Schatten

1 — Bubble One (alle Seiten schräg, Zapfen links)

Jetzt Ihr Fahrzeug beschriften lassen

Professionelle Fahrzeugbeschriftung aus München — schnell, langlebig, auffällig.

Angebot anfragen Mehr erfahren

<?php $ctaId++; ?>
<section class="scene cta-bubble-one bg-primary" style="clip-path:url(#cta-clip-<?= $ctaId; ?>);">

    <!-- SVG clipPath — direkt in der Section, ID eindeutig per Counter -->
    <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;" aria-hidden="true">
        <defs>
            <clipPath id="cta-clip-<?= $ctaId; ?>" clipPathUnits="objectBoundingBox">
                <path d="M 0.04,0.12 C 0.01,0.04 0.02,0.01 0.07,0.02 L 0.93,0.00 C 0.97,0.00 0.99,0.02 0.99,0.08 L 0.97,0.88 C 0.97,0.95 0.95,0.99 0.90,0.98 L 0.10,0.96 C 0.05,0.96 0.03,0.93 0.03,0.87 L 0.02,0.72 L 0.00,0.92 L 0.04,0.72 Z"/>
            </clipPath>
        </defs>
    </svg>

    <div class="auto-container">
        <div class="cta__body">
            <div class="cta__text">
                <h2 class="cta__title">Überschrift</h2>
                <p class="cta__desc">Kurztext</p>
            </div>
            <div class="cta__actions">
                <a href="#" class="btn btn-dark">Button 1</a>
                <a href="#" class="btn btn-outline-dark">Button 2</a>
            </div>
        </div>
    </div>
</section>

3 — Bubble Two (oben schräg, Zapfen links)

Ihr Partner für Werbetechnik in München

Über 20 Jahre Erfahrung — Digitaldruck, Folierung, Beschriftung.

Angebot anfragen Referenzen

<?php $ctaId++; ?>
<section class="scene cta-bubble-two bg-dark" style="clip-path:url(#cta-clip-<?= $ctaId; ?>);">
    <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;" aria-hidden="true">
        <defs>
            <clipPath id="cta-clip-<?= $ctaId; ?>" clipPathUnits="objectBoundingBox">
                <path d="M 0.8471,0.2729 L 0.1540,0.1769 c -0.0074,-0.0010 -0.0135,0.0179 -0.0135,0.0415 v 0.4928 c 0.0000,0.0229 0.0058,0.0415 0.0130,0.0415 h 0.0940 l 0.0284,0.0704 v -0.0704 h 0.5707 c 0.0072,0.0000 0.0130,-0.0186 0.0130,-0.0415 v -0.3968 c 0.0000,-0.0222 -0.0055,-0.0405 -0.0124,-0.0415 Z"/>
            </clipPath>
        </defs>
    </svg>
    <div class="auto-container">...</div>
</section>

4 — Bubble Two Flip (Zapfen rechts)

Tapetendruck für Ihr Büro

Individuelle Wandgestaltung — Ihr Motiv, Ihre Marke, Ihre Wand.

Jetzt beraten lassen

<!-- Bubble Two Flip — oben rechts tiefer, Zapfen rechts -->
<?php $ctaId++; ?>
<section class="scene cta-bubble-two cta--flip bg-primary" style="clip-path:url(#cta-clip-<?= $ctaId; ?>);">
    <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;" aria-hidden="true">
        <defs>
            <clipPath id="cta-clip-<?= $ctaId; ?>" clipPathUnits="objectBoundingBox">
                <path d="M 0.1529,0.2729 L 0.8460,0.1769 c 0.0074,-0.0010 0.0135,0.0179 0.0135,0.0415 v 0.4928 c 0.0000,0.0229 -0.0058,0.0415 -0.0130,0.0415 h -0.0940 l -0.0284,0.0704 v -0.0704 h -0.5707 c -0.0072,0.0000 -0.0130,-0.0186 -0.0130,-0.0415 v -0.3968 c 0.0000,-0.0222 0.0055,-0.0405 0.0124,-0.0415 Z"/>
            </clipPath>
        </defs>
    </svg>
    <div class="auto-container">...</div>
</section>

5 — Alle Theme-Colors (Bubble Two)