Wie Block in CSS zu transformieren?

Wie Block in CSS transformieren? Pseudo-Elemente ist notwendig oder nicht? Ich versuche, auf dem Bild unten einen blockähnlichen Block zu erzeugen. Ich kann keinen Block wie auf dem Bild unten erstellen.Wie Block in CSS zu transformieren?

Dies ist mein Code:

.transform_items { 
 
    width: 40%; 
 
    height: 80px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    perspective: 600px; 
 
    margin-top: 150px; 
 
    left: 50px; 
 
} 
 
.block, 
 
.block::before{ 
 
    display: block; 
 
    position: absolute; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    border: 5px solid transparent; 
 
    width: 350px; 
 
    height: 60px; 
 
} 
 
.block::before { 
 
    content: ''; 
 
    border: 5px solid #52B352; 
 
    transform: rotateY(30deg); 
 
    top: -5px; 
 
    right: -5px; 
 
    bottom: -5px; 
 
    left: -35px; 
 
} 
 
.block a { 
 
    font-size: 24px; 
 
}

<div class="transform_items"> 
 
    <div class="block"><a>Block</a></div> 
 
</div>

Das erwartete Ergebnis:

Quelle

2016-08-18 CaT

ja es wird besser sein, ein Pseudo-Element zu verwenden, wenn Sie den Text gerade halten möchten – Aziz

@Aziz Ok! Ich verstehe. Aber ich kann kein blockähnliches Bild auf dem Bild erzeugen. Hilf mir! – CaT

Wenn Sie SVG verwenden können ⁽¹⁾, könnte es

codePen

svg #block { 
 
    stroke: orange; 
 
    fill: none; 
 
    stroke-width: 5 
 
} 
 
svg text { 
 
    font-size: 25px 
 
}

<svg version="1.1" x="0px" y="0px" width="274px" height="84px" viewBox="0 0 274 84"> 
 
    <polygon id="block" points="33,13 245,24 245,60 29,64 " /> 
 
    <text x="100" y="50">BLOCK</text> 
 
</svg>

wie diese Sie sich auch SVG-Code als .svg Datei speichern kann, ohne das Textelement und Verwenden Sie es als background-image für das div, das Ihren Text enthält

das Lesen zu lernen, wie svg auf unterschiedliche Weise zu verwenden: https://css-tricks.com/using-svg/

⁽¹⁾_{Browser-Unterstützung für SVG ist ein wenig besser als Browser-Unterstützung für transform, caniuse: SVG}

Quelle

2016-08-18 17:20:19

Wie Block in CSS zu transformieren?

Antwort

Verwandte Themen